import { Button, Form, Input, notification, Popconfirm } from 'antd'
import { useState } from 'react'
import { useQueryClient } from 'react-query'

import {
  updatePaymentCodeAndSubCode,
  updatePaymentInvoviceable
} from 'apiClient/services/billing'
import { getListTenantPaymentMethodsQueryKey } from 'apiClient/services/billing'
import { FormsPaymentCodeUpdateQuery } from 'apiClient/services/billing/interface'
import ModalForm from 'components/ModalForm'
import { getErrorMessage } from 'utils/error'

export const UpdatePaymentCodeForm: React.FC<
  React.PropsWithChildren<{
    orgId: string
    billingConfigId: number
    paymentType: string
    defaultValues?: FormsPaymentCodeUpdateQuery
  }>
> = ({ orgId, defaultValues, billingConfigId, paymentType }) => {
  const [visible, setVisible] = useState(false)

  const queryClient = useQueryClient()

  const onSubmit = async (data: FormsPaymentCodeUpdateQuery) => {
    await updatePaymentCodeAndSubCode(
      orgId,
      billingConfigId.toString(),
      paymentType,
      data
    )
    queryClient.invalidateQueries(
      getListTenantPaymentMethodsQueryKey(orgId, billingConfigId)
    )
    setVisible(false)
  }

  const renderFormFields = () => {
    return (
      <>
        <Form.Item label="Payment Code" required>
          <Form.Item
            name="payment_code"
            rules={[{ required: true, message: 'Required' }]}
            noStyle
          >
            <Input />
          </Form.Item>
        </Form.Item>
        <Form.Item label="Secondary Payment Code">
          <Form.Item name="payment_sub_code" noStyle>
            <Input />
          </Form.Item>
        </Form.Item>
      </>
    )
  }

  return (
    <>
      <Button type="link" onClick={() => setVisible(true)}>
        Update
      </Button>
      <ModalForm<FormsPaymentCodeUpdateQuery>
        title="Update Payment Code"
        layout={{ labelCol: { span: 9 } }}
        visible={visible}
        initValues={defaultValues}
        name="update-payment-code-form"
        onSubmit={onSubmit}
        onCancel={() => setVisible(false)}
        getFields={renderFormFields}
      ></ModalForm>
    </>
  )
}

export const UpdateInvoiceable = ({
  orgId,
  billingConfigId,
  paymentType
}: {
  orgId: string
  billingConfigId: number
  paymentType: string
}) => {
  const queryClient = useQueryClient()
  const [loading, setLoading] = useState(false)
  const [open, setOpen] = useState(false)

  const onSubmit = async () => {
    setLoading(true)
    try {
      await updatePaymentInvoviceable(
        orgId,
        billingConfigId.toString(),
        paymentType
      )
      setLoading(false)
      setOpen(false)
    } catch (e) {
      setLoading(false)
      setOpen(false)
      notification.error({ message: getErrorMessage(e) })
    }
    queryClient.invalidateQueries(
      getListTenantPaymentMethodsQueryKey(orgId, billingConfigId)
    )
  }

  return (
    <Popconfirm
      visible={open}
      placement="top"
      title="Are you sure to make this invoviceable?"
      okButtonProps={{ loading }}
      onConfirm={onSubmit}
      onCancel={() => setOpen(false)}
    >
      <Button type="link" onClick={() => setOpen(true)}>
        Mark as invoiceable
      </Button>
    </Popconfirm>
  )
}