import { SocialIcon, SocialLinkType } from '@komi-app/creator-ui'
import {
  FLAGS,
  IfFeatureDisabled,
  IfFeatureEnabled,
  useFeatureIsOn
} from '@komi-app/flags-sdk'
import { Button, Form, Input, Row } from 'antd'
import { useForm } from 'antd/lib/form/Form'
import { Icon, IconName } from 'components/Icon'
import { Paragraph } from 'components/Typography'
import { useCallback } from 'react'
import { SocialProfileLinkItem } from 'redux/User/types'

interface AddSocialLinkProps {
  item?: SocialProfileLinkItem
  onClose?: () => void
  onSubmit?: (item: SocialProfileLinkItem) => void
}

const AddSocialLink = ({ item, onClose, onSubmit }: AddSocialLinkProps) => {
  const isSocialLinksTypeFixEnabled = useFeatureIsOn(
    FLAGS.FEAT_SB_328_ONBOARDING_USERNAME_DISABLE_AUTOCOMPLETE_AUTOCAPITALISE
  )
  const [form] = useForm()

  const handleChange = useCallback(
    event => {
      if (!item) {
        return
      }
      const text = event.target.value
      if (item.key !== 'EMAIL') {
        const regex = /^(https?|ftp):\/\//i
        if (
          !regex.test(text) &&
          ('https://'.includes(text) || 'http://'.includes(text))
        ) {
          form.setFieldsValue({ [item.key]: text })

          return
        }
        if (!regex.test(text) && text.trim().length) {
          form.setFieldsValue({ [item.key]: 'https://' + text })
          return
        }
      }

      form.setFieldsValue({ text })
    },
    [form, item]
  )
  const handleClose = () => {
    form.resetFields()
    onClose?.()
  }
  const handleSubmit = useCallback(
    values => {
      if (!item) {
        return
      }
      const newItem = { ...item, value: values[item?.key] }
      onSubmit?.(newItem)
    },
    [item, onSubmit]
  )
  return (
    <div>
      <Form
        labelCol={{
          span: 24
        }}
        wrapperCol={{
          span: 24
        }}
        form={form}
        hideRequiredMark
        onFinish={handleSubmit}
      >
        {item ? (
          <>
            <div>
              <Paragraph className="m__b--24" preset="semibold18">
                {`Add ${
                  ['u', 'e', 'o', 'a', 'i', 'x'].includes(
                    (item.name || '').charAt(0).toLowerCase()
                  )
                    ? 'an'
                    : 'a'
                } ${item?.name} Link`}
              </Paragraph>
              <Row>
                <IfFeatureEnabled
                  feature={FLAGS.FEAT_SB_186_ADDITIONAL_SOCIAL_LINKS}
                >
                  <SocialIcon
                    social={
                      (item.key as SocialLinkType) || SocialLinkType.WEBSITE
                    }
                    mode="color"
                  />
                </IfFeatureEnabled>
                <IfFeatureDisabled
                  feature={FLAGS.FEAT_SB_186_ADDITIONAL_SOCIAL_LINKS}
                >
                  <Icon name={(item?.icon as IconName) || 'apple-music'} />
                </IfFeatureDisabled>

                <Paragraph
                  className="m__l--10"
                  ellipsis={true}
                  preset="semibold16"
                >
                  {item?.name || ''}
                </Paragraph>
              </Row>
              <Form.Item
                rules={[
                  {
                    required: true,
                    message: 'Please enter this field'
                  },
                  item.key === 'EMAIL'
                    ? {
                        type: 'email',
                        message: 'Please enter a valid email'
                      }
                    : {
                        type: 'url',
                        message: 'Please enter a valid link'
                      }
                ]}
                name={item?.key}
                className={'m__t--12 m__b--20'}
              >
                <Input
                  autoFocus
                  onChange={handleChange}
                  placeholder={
                    item.key === 'EMAIL'
                      ? 'Enter your email address'
                      : 'https://'
                  }
                  type={
                    isSocialLinksTypeFixEnabled
                      ? item.key === 'EMAIL'
                        ? 'email'
                        : 'url'
                      : undefined
                  }
                  className="height--52"
                />
              </Form.Item>
            </div>

            <div
              className="profile-smart-link__actions m__t--32"
              style={{ textAlign: 'end' }}
            >
              <Button
                className="ant-btn-xl ant-btn-uppercase m__r--10"
                onClick={handleClose}
              >
                Cancel
              </Button>
              <Button
                className="ant-btn-xl ant-btn-uppercase"
                htmlType="submit"
                size="large"
                type="primary"
              >
                Add Link
              </Button>
            </div>
          </>
        ) : (
          <div />
        )}
      </Form>
    </div>
  )
}

export default AddSocialLink
