import {
  Descriptions,
  DescriptionsProps,
  Input,
  Select,
  Typography
} from 'antd'
import { useEffect } from 'react'
import { Controller, useFormContext } from 'react-hook-form'

import { FormsSKUGroup } from 'apiClient/services/billing/interface'

import type { SKUGroupModalType } from './SKUGroupModal'
import { useJSONValue } from './useJSONValue'
import {
  SKU_GROUP_TYPE_FORMULA_PRICE,
  SKU_GROUP_TYPE_MANUAL_PRICE
} from './utils'

export interface SKUGroupFormProps {
  type: SKUGroupModalType
  data?: FormsSKUGroup
}

const DESC_PROPS: DescriptionsProps = {
  colon: false,
  layout: 'vertical',
  contentStyle: { paddingRight: '4px' }
}

export const useSKUGroupForm = () => useFormContext<FormsSKUGroup>()

export const SKUGroupForm = ({ type, data }: SKUGroupFormProps) => {
  const disabled = type === 'view'
  const { watch } = useSKUGroupForm()
  const groupId = watch('group_id')
  const skuGroupType = watch('sku_group_type')
  const isFormulaPrice = skuGroupType !== SKU_GROUP_TYPE_MANUAL_PRICE
  const disableSKUGroupType = disabled || type !== 'create' || !!groupId
  const { jsonValue, setJSONValue, saveJSONValue, toJSONValueString } =
    useJSONValue('{}')

  useEffect(() => {
    setJSONValue(toJSONValueString(data?.price_expression))
  }, [data])

  return (
    <>
      <Typography.Title level={5}>SKU Group Fields</Typography.Title>

      <Descriptions {...DESC_PROPS}>
        <Descriptions.Item label="Group ID">
          <Controller
            name="group_id"
            render={({ field }) => {
              return <Input {...field} disabled />
            }}
          />
        </Descriptions.Item>
        <Descriptions.Item label="Unit Key Pattern">
          <Controller
            name="unit_key_pattern"
            render={({ field }) => {
              return (
                <Input
                  {...field}
                  onChange={(e) => {
                    field.onChange(e.target.value?.trim())
                  }}
                  disabled={disabled}
                />
              )
            }}
          />
        </Descriptions.Item>
        <Descriptions.Item label="Name">
          <Controller
            name="name"
            render={({ field }) => <Input {...field} disabled={disabled} />}
          />
        </Descriptions.Item>
        <Descriptions.Item label="Category" span={1}>
          <Controller
            name="category"
            render={({ field }) => <Input {...field} disabled={disabled} />}
          />
        </Descriptions.Item>
        <Descriptions.Item label="SKU Group Type" span={1}>
          <Controller
            name="sku_group_type"
            render={({ field }) => {
              return (
                <Select
                  {...field}
                  disabled={disableSKUGroupType}
                  style={{ width: '100%' }}
                >
                  <Select.Option value={SKU_GROUP_TYPE_FORMULA_PRICE}>
                    Formula Price
                  </Select.Option>
                  <Select.Option value={SKU_GROUP_TYPE_MANUAL_PRICE}>
                    Manual Price
                  </Select.Option>
                </Select>
              )
            }}
          />
        </Descriptions.Item>
      </Descriptions>

      {isFormulaPrice && (
        <Descriptions {...DESC_PROPS}>
          <Descriptions.Item label="Price Formula">
            <Controller
              name="price_formula"
              render={({ field }) => (
                <Input
                  {...field}
                  onChange={(e) => {
                    field.onChange(e.target.value?.trim())
                  }}
                  disabled={disabled}
                />
              )}
            />
          </Descriptions.Item>
        </Descriptions>
      )}

      <Descriptions {...DESC_PROPS}>
        <Descriptions.Item label="Price Type">
          <Controller
            name="price_type"
            render={({ field }) => {
              return (
                <Select
                  {...field}
                  disabled={disabled}
                  style={{ width: '100%' }}
                >
                  <Select.Option value="threshold">Threshold</Select.Option>
                  <Select.Option value="normal">Normal</Select.Option>
                </Select>
              )
            }}
          />
        </Descriptions.Item>
        <Descriptions.Item label="Price Expression">
          <Controller
            name="price_expression"
            render={({ field }) => {
              return (
                <Input
                  disabled={disabled}
                  value={jsonValue}
                  onChange={(e) => {
                    setJSONValue(e.target.value)
                  }}
                  onBlur={() => {
                    field.onChange(saveJSONValue())
                  }}
                />
              )
            }}
          />
        </Descriptions.Item>
        <Descriptions.Item label="Measure Unit">
          <Controller
            name="measure_unit"
            render={({ field }) => {
              return (
                <Select
                  {...field}
                  disabled={disabled}
                  style={{ width: '100%' }}
                >
                  <Select.Option value="min">Min</Select.Option>
                  <Select.Option value="gb">GB</Select.Option>
                </Select>
              )
            }}
          />
        </Descriptions.Item>
      </Descriptions>
    </>
  )
}