import React from 'react'
import { useFormikContext } from 'formik'
import { useTranslation } from 'next-i18next'
import { FormControl, FormGroup, FormHelperText, FormLabel, Grid } from '@mui/material'

import { Option, RoleRenderObject, SupportFormData } from '../helpers/support-form.types'
import CheckboxField from 'components/common/form/CheckboxField'
import FormTextField from 'components/common/form/FormTextField'
import HeaderTypography from '../helpers/HeaderTypography'

type QuestionProps = {
  question?: RoleRenderObject
}
const Question = ({ question }: QuestionProps) => {
  const { t } = useTranslation()
  const formik = useFormikContext<SupportFormData>()
  if (!question) {
    return null
  }
  return (
    <FormControl fullWidth required error={Boolean(formik.errors.roles)} component="fieldset">
      <FormGroup>
        <FormLabel component="legend">{t(question.title)}</FormLabel>
        {question.options.map((option: Option, index) => (
          <React.Fragment key={index}>
            <CheckboxField label={option.label} name={option.name} />
            {option.textFieldOptions && option.value ? (
              <FormTextField
                type="text"
                name={option.textFieldOptions.name}
                label={option.textFieldOptions.placeholder}
                placeholder={t(option.textFieldOptions.placeholder)}
              />
            ) : null}
          </React.Fragment>
        ))}
      </FormGroup>
      {Boolean(formik.errors[question.key]) && (
        <FormHelperText error>{t(question.errorMessage)}</FormHelperText>
      )}
    </FormControl>
  )
}

export default function AdditionalQuestions() {
  const formik = useFormikContext<SupportFormData>()
  const { t } = useTranslation()
  const questionsList: Array<RoleRenderObject> = [
    {
      key: 'benefactor',
      title: 'support:steps.addition-questions.benefactor.title',
      errorMessage: 'validation:select-role',
      options: [
        {
          type: 'checkbox',
          value: formik.values.benefactor?.campaignBenefactor,
          name: 'benefactor.campaignBenefactor',
          label: 'support:steps.addition-questions.benefactor.campaignBenefactor',
        },
        {
          type: 'checkbox',
          value: formik.values.benefactor?.platformBenefactor,
          name: 'benefactor.platformBenefactor',
          label: 'support:steps.addition-questions.benefactor.platformBenefactor',
        },
      ],
    },
    {
      key: 'associationMember',
      title: 'support:steps.addition-questions.associationMember.title',
      errorMessage: 'validation:select-role',
      options: [
        {
          type: 'checkbox',
          value: formik.values.associationMember?.isMember,
          name: 'associationMember.isMember',
          label: 'support:steps.addition-questions.associationMember.member',
        },
      ],
    },
    {
      key: 'partner',
      title: 'support:steps.addition-questions.partner.title',
      errorMessage: 'validation:select-role',
      options: [
        {
          type: 'checkbox',
          value: formik.values.partner?.npo,
          name: 'partner.npo',
          label: 'support:steps.addition-questions.partner.npo',
        },
        {
          type: 'checkbox',
          value: formik.values.partner?.bussiness,
          name: 'partner.bussiness',
          label: 'support:steps.addition-questions.partner.bussiness',
        },
        {
          type: 'checkbox',
          value: formik.values.partner?.other,
          name: 'partner.other',
          label: 'support:steps.addition-questions.partner.other',
          textFieldOptions: {
            value: formik.values.partner?.otherText || '',
            name: 'partner.otherText',
            placeholder: 'support:steps.addition-questions.partner.otherText',
          },
        },
      ],
    },
    {
      key: 'volunteer',
      title: 'support:steps.addition-questions.volunteer.title',
      errorMessage: 'validation:select-role',
      options: [
        {
          type: 'checkbox',
          value: formik.values.volunteer?.projectManager,
          name: 'volunteer.projectManager',
          label: 'support:steps.addition-questions.volunteer.projectManager',
        },
        {
          type: 'checkbox',
          value: formik.values.volunteer?.backend,
          name: 'volunteer.backend',
          label: 'support:steps.addition-questions.volunteer.backend',
        },
        {
          type: 'checkbox',
          value: formik.values.volunteer?.frontend,
          name: 'volunteer.frontend',
          label: 'support:steps.addition-questions.volunteer.frontend',
        },
        {
          type: 'checkbox',
          value: formik.values.volunteer?.designer,
          name: 'volunteer.designer',
          label: 'support:steps.addition-questions.volunteer.designer',
        },
        {
          type: 'checkbox',
          value: formik.values.volunteer?.devOps,
          name: 'volunteer.devOps',
          label: 'support:steps.addition-questions.volunteer.devOps',
        },
        {
          type: 'checkbox',
          value: formik.values.volunteer?.security,
          name: 'volunteer.security',
          label: 'support:steps.addition-questions.volunteer.security',
        },
        {
          type: 'checkbox',
          value: formik.values.volunteer?.financesAndAccounts,
          name: 'volunteer.financesAndAccounts',
          label: 'support:steps.addition-questions.volunteer.financesAndAccounts',
        },
        {
          type: 'checkbox',
          value: formik.values.volunteer?.lawyer,
          name: 'volunteer.lawyer',
          label: 'support:steps.addition-questions.volunteer.lawyer',
        },
        {
          type: 'checkbox',
          value: formik.values.volunteer?.qa,
          name: 'volunteer.qa',
          label: 'support:steps.addition-questions.volunteer.qa',
        },
        {
          type: 'checkbox',
          value: formik.values.volunteer?.marketing,
          name: 'volunteer.marketing',
          label: 'support:steps.addition-questions.volunteer.marketing',
        },
      ],
    },
    {
      key: 'company',
      title: 'support:steps.addition-questions.company.title',
      errorMessage: 'validation:select-role',
      options: [
        {
          type: 'checkbox',
          value: formik.values.company?.sponsor,
          name: 'company.sponsor',
          label: 'support:steps.addition-questions.company.sponsor',
        },
        {
          type: 'checkbox',
          value: formik.values.company?.volunteer,
          name: 'company.volunteer',
          label: 'support:steps.addition-questions.company.volunteer',
        },
        {
          type: 'checkbox',
          value: formik.values.company?.other,
          name: 'company.other',
          label: 'support:steps.addition-questions.company.other',
          textFieldOptions: {
            value: formik.values.company?.otherText || '',
            name: 'company.otherText',
            placeholder: 'support:steps.addition-questions.company.otherText',
          },
        },
      ],
    },
  ]

  return (
    <Grid container spacing={6} justifyContent="center">
      <Grid item xs={12}>
        <HeaderTypography>{t('support:steps.addition-questions.subtitle')}</HeaderTypography>
      </Grid>
      <Grid item xs={12} md={10}>
        <Grid container spacing={6} justifyContent="center">
          {Object.entries(formik.values.roles)
            .filter(([, value]) => value)
            .map(([key], index) => (
              <Grid key={index} item xs={12} sm={10}>
                <Question question={questionsList.find((obj) => obj.key == key)} />
              </Grid>
            ))}
        </Grid>
      </Grid>
    </Grid>
  )
}