import { Button, Form, Input, message, Select } from 'antd'
import { useState } from 'react'

import {
  useFeatureWhitelistControllerCreateFeatureWhitelist,
  useFeatureWhitelistControllerUpdateFeatureWhitelist
} from 'apiClient/services/devops'
import type {
  FeatureWlFeatureWhitelistInfo,
  FeatureWlFeatureWhitelistInfoBody
} from 'apiClient/services/devops/interface'
import ModalForm from 'components/ModalForm'

export interface FeatureWhitelistCreateFormProps {
  action: 'add' | 'update'
  onSuccess?: () => Promise<void> | void
  record?: FeatureWlFeatureWhitelistInfo
}

interface FeatureWhitelistFormValues {
  by_email_suffix?: string[]
  by_org_id?: string[]
  description?: string
  feature?: string
}

export const normalizeEmailSuffixes = (emailSuffixes?: unknown[]) => {
  return emailSuffixes
    ?.filter((it): it is string => typeof it === 'string')
    .map((it) => it.trim())
    .filter(Boolean)
}

export const normalizeOrgIds = (orgIds?: unknown[]) => {
  return orgIds
    ?.filter((it) => it !== null && it !== undefined)
    .map((it) => String(it).trim())
    .filter(Boolean)
}

export const FeatureWhitelistCreateForm = ({
  action,
  onSuccess,
  record
}: FeatureWhitelistCreateFormProps) => {
  const [visible, setVisible] = useState(false)
  const { mutateAsync: createFeatureWhitelist } =
    useFeatureWhitelistControllerCreateFeatureWhitelist()
  const { mutateAsync: updateFeatureWhitelist } =
    useFeatureWhitelistControllerUpdateFeatureWhitelist()

  const isEdit = action === 'update'

  const toPayload = (
    data: FeatureWhitelistFormValues
  ): FeatureWlFeatureWhitelistInfoBody => {
    const orgIds = normalizeOrgIds(data.by_org_id)
    const emailSuffixes = normalizeEmailSuffixes(data.by_email_suffix)

    return {
      description: data.description,
      email_suffixes: emailSuffixes?.length ? emailSuffixes : undefined,
      name: data.feature?.trim(),
      org_ids: orgIds?.length ? orgIds : undefined
    }
  }

  const onSubmit = async (data: FeatureWhitelistFormValues) => {
    const payload = toPayload(data)

    if (isEdit) {
      await updateFeatureWhitelist({
        data: payload,
        name: record?.name!
      })
    } else {
      await createFeatureWhitelist({
        data: payload
      })
    }

    message.success('Save successful!')
    setVisible(false)
    await onSuccess?.()
  }

  const renderFormFields = () => {
    return (
      <>
        <Form.Item
          name="feature"
          label="Feature"
          rules={[{ required: true, message: 'Required' }]}
        >
          <Input disabled={isEdit} />
        </Form.Item>
        <Form.Item name="description" label="Description">
          <Input.TextArea rows={4} />
        </Form.Item>
        <Form.Item label="Whitelist by"></Form.Item>
        <Form.Item
          name="by_org_id"
          label="Org ID"
          extra="Orgs listed here are on whitelist"
          rules={[
            ({}) => ({
              validator(_rule, value: string[]) {
                if (
                  Array.isArray(value) &&
                  value.length &&
                  value.some((it) => !/^\d+$/.test(it))
                ) {
                  return Promise.reject(new Error('Please input valid org id'))
                }
                return Promise.resolve()
              }
            })
          ]}
        >
          <Select
            mode="tags"
            style={{ width: '100%' }}
            tokenSeparators={[',']}
            placeholder="org1,org2"
          />
        </Form.Item>
        <Form.Item
          name="by_email_suffix"
          label="Email Suffix"
          extra="Orgs with email suffix are on the whitelist"
          rules={[
            ({}) => ({
              validator(_rule, value: string[]) {
                if (
                  Array.isArray(value) &&
                  value.length &&
                  value.some(
                    (it) =>
                      !/^((?!:\/\/)[A-Za-z0-9-]+\.)*[A-Za-z0-9-]+\.[A-Za-z0-9-]{2,}$/.test(
                        it
                      )
                  )
                ) {
                  return Promise.reject(new Error('Please input valid suffix'))
                }
                return Promise.resolve()
              }
            })
          ]}
        >
          <Select
            placeholder="example.com,examplec.com"
            tokenSeparators={[',']}
            mode="tags"
            style={{ width: '100%' }}
          />
        </Form.Item>
      </>
    )
  }

  return (
    <>
      <Button
        type={isEdit ? 'link' : 'primary'}
        onClick={() => setVisible(true)}
      >
        {isEdit ? 'Edit' : 'Add a feature to whitelist'}
      </Button>
      <ModalForm
        width={750}
        initValues={{
          by_email_suffix: normalizeEmailSuffixes(record?.email_suffixes),
          by_org_id: normalizeOrgIds(record?.org_ids),
          description: record?.description,
          feature: record?.name
        }}
        destoryOnClose
        title={
          !isEdit
            ? 'Add a new feature to whitelist'
            : `Edit orgs on the whitelist for ${record?.name || ''}`
        }
        visible={visible}
        name="featureWhitelist"
        getFields={renderFormFields}
        onSubmit={onSubmit}
        okText={!isEdit ? 'Add' : 'Edit'}
        onCancel={() => {
          setVisible(false)
        }}
      ></ModalForm>
    </>
  )
}