import { Button, Form, Input, Steps, Space, Select } from 'antd'
import { FormInstance } from 'antd/es/form/Form'
import { useState } from 'react'

import { createResalePartnerOrg } from 'apiClient/services/account'
import { FormsResellerOrgReq } from 'apiClient/services/account/interface'
import ModalForm from 'components/ModalForm'
import { countries } from 'utils/countries'

const { Step } = Steps

const CREATE_STEPS = {
  INITIAL: 0,
  CREATE: 1,
  DONE: 2
} as const

const ResellerPreview: React.FC<
  React.PropsWithChildren<{
    data: FormsResellerOrgReq
  }>
> = ({ data }) => {
  const style: React.CSSProperties = {
    width: 200,
    display: 'inline-block',
    textAlign: 'right'
  }

  return (
    <Space direction="vertical">
      <Space>
        <span style={style}>Name: </span>
        <span>{data.name}</span>
      </Space>
      <Space>
        <span style={style}>Country: </span>
        <span>
          {countries[data.country as keyof typeof countries] || data.country}
        </span>
      </Space>
      <Space>
        <span style={style}>Contact Email: </span>
        <span>{data.email}</span>
      </Space>
    </Space>
  )
}

export const CreateReseller: React.FC<
  React.PropsWithChildren<{
    onComplete?: () => void
    title?: string
    actionText?: string
  }>
> = ({
  onComplete,
  title = 'Create Resale Partner',
  actionText = 'Create'
}) => {
  const [visible, setVisible] = useState(false)
  const [steps, setSteps] = useState<number>(CREATE_STEPS.INITIAL)
  const [value, setValue] = useState<FormsResellerOrgReq | null>(null)

  const onSubmit = async (data: FormsResellerOrgReq) => {
    if (steps === CREATE_STEPS.INITIAL) {
      setValue(data)
      setSteps(CREATE_STEPS.CREATE)
      return
    }

    if (steps === CREATE_STEPS.CREATE && value) {
      await createResalePartnerOrg(value)
      setSteps(CREATE_STEPS.DONE)
      return
    }
    onComplete?.()
    onClose(true)
  }

  const onClose = (close = false) => {
    if (!close && steps === CREATE_STEPS.CREATE) {
      setSteps(CREATE_STEPS.INITIAL)
      return
    }
    setValue(null)
    setSteps(CREATE_STEPS.INITIAL)
    setVisible(false)
  }

  const renderFields = (form: FormInstance) => {
    return (
      <>
        <Steps current={steps} size="small" style={{ marginBottom: 16 }}>
          <Step title="Configure Details" />
          <Step title="Confirm" />
          <Step title="Done" />
        </Steps>
        {steps === CREATE_STEPS.INITIAL && (
          <>
            <Form.Item
              name="name"
              label="Name"
              required
              rules={[{ required: true, message: 'Required' }]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              name="country"
              label="Country"
              required
              rules={[{ required: true, message: 'Required' }]}
            >
              <Select
                showSearch
                filterOption={(input, option) => {
                  return (option?.label ?? '')
                    .toLowerCase()
                    .includes(input.toLowerCase())
                }}
                options={Object.keys(countries).map((code) => ({
                  label: countries[code],
                  value: code
                }))}
              />
            </Form.Item>
            <Form.Item
              name="email"
              label="Contact Email"
              required
              rules={[
                { required: true, type: 'email', message: 'Invalid Email' }
              ]}
            >
              <Input type="email" />
            </Form.Item>
          </>
        )}
        {steps === CREATE_STEPS.CREATE && !!value && (
          <ResellerPreview data={{ ...value }}></ResellerPreview>
        )}
      </>
    )
  }

  return (
    <div>
      <Button type="primary" onClick={() => setVisible(true)}>
        {actionText}
      </Button>
      <ModalForm
        width={750}
        name="create-reseller-form"
        title={title}
        visible={visible}
        onSubmit={onSubmit}
        onCancel={() => onClose(false)}
        getFields={renderFields}
        cancelText={steps === CREATE_STEPS.CREATE ? 'Prev' : 'Cancel'}
        okText={steps === CREATE_STEPS.INITIAL ? 'Next' : 'Confirm'}
        destoryOnClose
      ></ModalForm>
    </div>
  )
}