import { LinkIcon } from '@heroicons/react/outline'
import toast from 'react-hot-toast'
import { copyToClipboard } from 'web/lib/util/copy'
import { track } from 'web/lib/service/analytics'
import { Modal } from './layout/modal'
import { Col } from './layout/col'
import { Title } from './title'
import { Button } from './button'
import { TweetButton } from './tweet-button'
import { Row } from './layout/row'

export function SharePostModal(props: {
  shareUrl: string
  isOpen: boolean
  setOpen: (open: boolean) => void
}) {
  const { isOpen, setOpen, shareUrl } = props

  const linkIcon = <LinkIcon className="mr-2 h-6 w-6" aria-hidden="true" />

  return (
    <Modal open={isOpen} setOpen={setOpen} size="md">
      <Col className="gap-4 rounded bg-white p-4">
        <Title className="!mt-0 !mb-2" text="Share this post" />
        <Button
          size="2xl"
          color="gradient"
          className={'mb-2 flex max-w-xs self-center'}
          onClick={() => {
            copyToClipboard(shareUrl)
            toast.success('Link copied!', {
              icon: linkIcon,
            })
            track('copy share post link')
          }}
        >
          {linkIcon} Copy link
        </Button>

        <Row className="z-0 justify-start gap-4 self-center">
          <TweetButton className="self-start" tweetText={shareUrl} />
        </Row>
      </Col>
    </Modal>
  )
}