FeedbackModal.tsx

import React, { useState } from 'react'
import { translate } from 'cozy-ui/react/I18n'
import Modal from 'components/CommonKit/Modal/Modal'
import StyledButton from 'components/CommonKit/Button/StyledButton'
import StyledIconBorderedButton from 'components/CommonKit/IconButton/StyledIconBorderedButton'

import BugOnIcon from 'assets/icons/visu/feedback/bug-on.svg'
import BugOffIcon from 'assets/icons/visu/feedback/bug-off.svg'
import IdeaOnIcon from 'assets/icons/visu/feedback/idea-on.svg'
import IdeaOffIcon from 'assets/icons/visu/feedback/idea-off.svg'
import OtherOnIcon from 'assets/icons/visu/feedback/other-on.svg'
import OtherOffIcon from 'assets/icons/visu/feedback/other-off.svg'

interface FeedbackModalProps {
  opened: boolean
  t: Function
  handleCloseClick: () => void
}

const FeedbackModal: React.FC<FeedbackModalProps> = ({
  opened,
  t,
  handleCloseClick,
}: FeedbackModalProps) => {
  const [type, setType] = useState<string>('bug')
  const [description, setDescription] = useState<string>('')
  const [email, setEmail] = useState<string>('')

  const sendEmail = () => {
    console.log(type, description, email)
    setType('bug')
    setDescription('')
    setEmail('')
  }

  const selectorItem = (itemType: string) => {
    const getOnIcon = (_type: string) => {
      switch (_type) {
        case 'bug':
          return BugOnIcon
        case 'idea':
          return IdeaOnIcon
        case 'other':
          return OtherOnIcon
        default:
          return BugOnIcon
      }
    }
    const getOffIcon = (_type: string) => {
      switch (_type) {
        case 'bug':
          return BugOffIcon
        case 'idea':
          return IdeaOffIcon
        case 'other':
          return OtherOffIcon
        default:
          return BugOffIcon
      }
    }
    const selected = type === itemType
    console.log(itemType, selected)
    return (
      <div className="fb-selector-item">
        <StyledIconBorderedButton
          icon={selected ? getOnIcon(itemType) : getOffIcon(itemType)}
          selected={selected}
          size={36}
          onClick={() => setType(itemType)}
        >
          <div
            className={
              selected
                ? 'fb-selector-item-selectedlabel text-10-bold'
                : 'fb-selector-item-label text-10-normal'
            }
          >
            {t('feedback.type_' + itemType)}
          </div>
        </StyledIconBorderedButton>
      </div>
    )
  }

  return (
    <Modal
      open={opened}
      yellowBorder={true}
      handleCloseClick={handleCloseClick}
    >
      <div className="fb-root">
        <div className="fb-header text-18-bold">{t('feedback.title')}</div>
        <div className="fb-content">
          <div className="fb-label text-16-bold">{t('feedback.type')}</div>
          <div className="fb-selector">
            {selectorItem('bug')}
            {selectorItem('idea')}
            {selectorItem('other')}
          </div>
          <div className="fb-label text-16-bold">
            {t('feedback.description')}
          </div>
          <textarea
            id="idFeedbackDescription"
            className="fb-form fb-textarea"
            aria-describedby="Feedbacks description"
            placeholder={t('feedback.description_placeholder')}
            name="description"
            onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
              setDescription(e.target.value)
            }
            value={description}
          ></textarea>
          <div className="fb-label text-16-bold">{t('feedback.email')}</div>
          <input
            id="idFeedbackEmail"
            type="text"
            className="fb-form fb-input"
            aria-describedby="Feedbacks email"
            placeholder={t('feedback.email_placeholder')}
            name="email"
            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
              setEmail(e.target.value)
            }
            value={email}
          />
          <StyledButton className="fb-button" onClick={sendEmail}>
            {t('feedback.send')}
          </StyledButton>
        </div>
      </div>
    </Modal>
  )
}

export default translate()(FeedbackModal)