import { Icon, Gear, Link } from '@linagora/twake-icons'
import PropTypes from 'prop-types'
import React, { useState } from 'react'

import Avatar from 'cozy-ui/transpiled/react/Avatar'
import Fade from 'cozy-ui/transpiled/react/Fade'
import IconButton from 'cozy-ui/transpiled/react/IconButton'
import ListItem from 'cozy-ui/transpiled/react/ListItem'
import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
import Typography from 'cozy-ui/transpiled/react/Typography'
import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
import { useI18n } from 'twake-i18n'

import LinkRecipientPermissions from './LinkRecipientPermissions'
import RecipientConfirm from './RecipientConfirm'
import {
  checkIsPermissionHasPassword,
  getPermissionExpiresDate
} from '../../helpers/permissions'
import { FADE_IN_DURATION } from '../../helpers/recipients'
import { useSharingContext } from '../../hooks/useSharingContext'
import { ShareRestrictionModal } from '../ShareRestrictionModal/ShareRestrictionModal'

const LinkRecipientTextReadOnly = ({ textPrimary, textSecondary }) => {
  return (
    <ListItemText
      primary={
        <div className="u-flex u-flex-items-center">
          <Typography>{textPrimary}</Typography>
        </div>
      }
      secondary={textSecondary}
    />
  )
}

const LinkRecipientText = ({ onClick, textPrimary, textSecondary }) => {
  return (
    <ListItemText
      onClick={onClick}
      primary={
        <div className="u-flex u-flex-items-center">
          <Typography className="u-c-pointer ">{textPrimary}</Typography>
          <IconButton size="small" className="u-ml-half">
            <Icon icon={Gear} />
          </IconButton>
        </div>
      }
      secondary={textSecondary}
    />
  )
}

const LinkRecipient = props => {
  const { t, f, lang } = useI18n()
  const { isMobile } = useBreakpoints()
  const { getDocumentPermissions } = useSharingContext()

  const {
    recipientConfirmationData,
    verifyRecipient,
    fadeIn,
    document,
    isReadOnly
  } = props

  const [openShareRestrictionModal, setOpenShareRestrictionModal] =
    useState(false)
  const permissions = getDocumentPermissions(document?._id)
  const hasPassword = checkIsPermissionHasPassword(permissions)
  const expiresDate = getPermissionExpiresDate(permissions)
  const dateFormatted = expiresDate
    ? f(expiresDate, lang === 'fr' ? 'dd/LL/yyyy' : 'LL/dd/yyyy')
    : null

  const textPrimary = hasPassword
    ? t('Share.recipients.linkWithPassword')
    : t('Share.recipients.anyoneWithTheLink')

  const textSecondary = expiresDate
    ? t('Share.recipients.expires', {
        date: dateFormatted
      })
    : ''

  const RightPart = recipientConfirmationData ? (
    <RecipientConfirm
      recipientConfirmationData={recipientConfirmationData}
      verifyRecipient={verifyRecipient}
    />
  ) : (
    <LinkRecipientPermissions {...props} />
  )

  return (
    <Fade in timeout={fadeIn ? FADE_IN_DURATION : 0}>
      <ListItem gutters={isMobile ? 'default' : 'double'} size="small">
        <ListItemIcon>
          <Avatar size="m" color="none" border innerBorder>
            <Icon icon={Link} />
          </Avatar>
        </ListItemIcon>
        {isReadOnly ? (
          <LinkRecipientTextReadOnly
            textPrimary={textPrimary}
            textSecondary={textSecondary}
          />
        ) : (
          <LinkRecipientText
            onClick={() => setOpenShareRestrictionModal(true)}
            textPrimary={textPrimary}
            textSecondary={textSecondary}
          />
        )}
        {RightPart}
        {openShareRestrictionModal && (
          <ShareRestrictionModal
            file={document}
            onClose={() => setOpenShareRestrictionModal(false)}
          />
        )}
      </ListItem>
    </Fade>
  )
}

LinkRecipient.propTypes = {
  recipientConfirmationData: PropTypes.oneOfType([
    PropTypes.bool,
    PropTypes.object
  ]),
  verifyRecipient: PropTypes.func,
  fadeIn: PropTypes.bool,
  document: PropTypes.object,
  permissions: PropTypes.arrayOf(PropTypes.object)
}

export default LinkRecipient