import React, { Button, Form, Input } from 'antd'
import { FormInstance } from 'antd/lib/form/Form'
import CaptureFieldList from 'components/CaptureFieldList'
import { Paragraph, Text } from 'components/Typography'
import { DataCaptureFieldItem } from 'models/talent/talent-profile-module.model'
import { useCallback, useMemo, useState } from 'react'
import DataCaptureLayout from '../Layout'
import AddFieldsMenu from '../AddFieldsMenu/AddFieldsMenu'
import './Forms.scss'
import { FLAGS, useFeatureIsOn } from '@komi-app/flags-sdk'
import { useWindowSize } from '../../../hooks'
import FormButtons from '../FormButtons/FormButtons'
import {
  DataCaptureFieldType,
  DataCaptureFieldLabel,
  LegalsType
} from '@komi-app/shared-types'

interface IProps {
  form: FormInstance<any>
  onClose: () => void
  nextStep: () => void
  fields: DataCaptureFieldItem[]
  setFields: (items: DataCaptureFieldItem[]) => void
  title: string
  subTitle: string
  setTitle: (value: string) => void
  setSubTitle: (value: string) => void
}

const SecondStep = ({
  form,
  onClose,
  fields = [],
  setFields,
  title,
  subTitle,
  setTitle,
  setSubTitle
}: IProps) => {
  const size = useWindowSize()
  const isMobile = useMemo(() => (size.width || 0) <= 768, [size])
  const isContactFormFlagOn = useFeatureIsOn(FLAGS.FEAT_SB_630_CONTACT_FORM)
  const [activeFieldIndex, setActiveFieldIndex] = useState(-1)
  const handleInputChange = (event: any) => {
    const value = event.target.value
    if (value.length > 35) {
      return
    }
    setTitle(value)
    form.setFieldsValue({ headerTitle: value })
  }

  const handleChangeSubtitle = (event: any) => {
    const value = event.target.value
    if (value.length > 70) {
      return
    }
    setSubTitle(value)
    form.setFieldsValue({ headerSubTitle: value })
  }
  const handleAddField = useCallback(
    (key: DataCaptureFieldType) => {
      const now = new Date()
      const data: DataCaptureFieldItem[] = [
        ...fields,
        {
          edit: false,
          type: key,
          name: `${key}${now.getTime()}`,
          label: DataCaptureFieldLabel[key],
          legalType:
            key === DataCaptureFieldType.LEGALS
              ? LegalsType.DEFAULT_UNCHECK
              : undefined,
          required: false,
          order: fields.length,
          options: []
        }
      ]
      setActiveFieldIndex(data.length - 1)
      setFields(data)
    },
    [fields]
  )

  return (
    <DataCaptureLayout step={2} data={{ title, subTitle, fields }}>
      <div className="data-capture-form-container">
        <Paragraph preset="semibold18">Form Header</Paragraph>
        <Paragraph
          preset="regular16"
          className="m__t--4 text--default opacity--80"
        >
          You can add a form header to tell your audience why they should sign
          up.
        </Paragraph>

        <Form.Item
          name="headerTitle"
          className={'m__t--16 m__b--20'}
          label="Title (Optional)"
        >
          <Input
            className="height--52"
            placeholder="Add a title, e.g. “Sign up for my email newsletter”"
            onChange={handleInputChange}
            maxLength={35}
            value={title}
          />
          <Text
            preset="regular12"
            className="m__t--4 opacity--60 text--default"
          >
            {title.length}/35 characters
          </Text>
        </Form.Item>
        <Form.Item
          label="Subtitle (Optional)"
          name="headerSubTitle"
          className={'m__t--12 m__b--20'}
        >
          <Input
            className="height--52"
            placeholder="Add a subtitle, e.g. “Receive updates and exclusive content”"
            onChange={handleChangeSubtitle}
            maxLength={70}
            value={subTitle}
          />
          <Text
            preset="regular12"
            className="m__t--4 opacity--60 text--default"
          >
            {subTitle.length | 0}/70 characters
          </Text>
        </Form.Item>

        <Paragraph preset="semibold18">Data Capture</Paragraph>
        <Paragraph
          preset="regular16"
          className="text--default opacity--80 m__t--4"
        >
          Add fields to capture data. Marking a field as required will make it
          mandatory for visitors to complete. The form will open in a separate
          popup.
        </Paragraph>
        <div className="m__t--16">
          <CaptureFieldList
            activeFieldIndex={activeFieldIndex}
            items={fields}
            onSetItems={setFields}
            setActiveFieldIndex={setActiveFieldIndex}
          />
          <AddFieldsMenu onAddItem={handleAddField} />
          {!fields.length && (
            <Paragraph preset="regular12" className="text--red m__t--8">
              Please add at least one field
            </Paragraph>
          )}
        </div>
        {!(isContactFormFlagOn && isMobile) && (
          <div className="profile-smart-link__actions m__t--38 ">
            <FormButtons
              handleClose={onClose}
              nextStepDisabled={!fields.length}
            />
          </div>
        )}
      </div>
    </DataCaptureLayout>
  )
}

export default SecondStep
