import {
  Card,
  Row,
  Col,
  Typography,
  Button,
  Divider,
  Form,
  Select,
  Tag
} from 'antd'
import React, { useState } from 'react'
import { useParams } from 'react-router-dom'

import {
  updateTenantCreditRiskLevel,
  useGetTenantCreditRiskLevel,
  useListAllCreditRiskLevel
} from 'apiClient/api'
import { FormsCreditRiskLevelIDInput } from 'apiClient/api/interface'
import { TenantGetTenantResp } from 'apiClient/services/devops/interface'
import ModalForm from 'components/ModalForm'

import { SuspendCard } from './SuspendOrg'

const pickerColor = (number: string) => {
  const num = parseInt(number) % 3
  const colors = ['magenta', 'geekblue', 'purple', 'cyan']
  return colors[num]
}

const RiskLevelForm: React.FC<
  React.PropsWithChildren<{
    onComplete?: () => {}
    initValues?: FormsCreditRiskLevelIDInput
    orgId: string
    trigger?: React.ReactElement
  }>
> = ({ onComplete, initValues, trigger, orgId }) => {
  const [visible, setVisible] = useState(false)

  const { data } = useListAllCreditRiskLevel({
    query: {
      refetchInterval: false
    }
  })

  const handleSubmit = async (data: FormsCreditRiskLevelIDInput) => {
    await updateTenantCreditRiskLevel(orgId, data)
    onComplete?.()
    setVisible(false)
  }

  const Trigger = trigger ? (
    React.cloneElement(trigger, {
      onClick: () => {
        setVisible(true)
      }
    })
  ) : (
    <Button type="primary" onClick={() => setVisible(true)}>
      Edit
    </Button>
  )

  const getFields = () => {
    return (
      <>
        <Form.Item
          name="credit_risk_level_id"
          label="Risk Level"
          rules={[{ required: true, message: 'Required' }]}
        >
          <Select>
            {(data?.data || []).map((pl) => (
              <Select.Option
                key={pl.credit_risk_level_id}
                value={pl.credit_risk_level_id}
              >
                {pl.credit_risk_level_name}{' '}
                <Tag
                  color={
                    pl.cost_quota?.cost_quota_limit === '-1'
                      ? '#108ee9'
                      : pickerColor(pl.cost_quota?.cost_quota_limit || '0')
                  }
                >
                  {pl.cost_quota?.cost_quota_limit === '-1'
                    ? 'Unlimited'
                    : pl.cost_quota?.cost_quota_limit}
                </Tag>
              </Select.Option>
            ))}
          </Select>
        </Form.Item>
      </>
    )
  }

  return (
    <div>
      {Trigger}
      <ModalForm
        initValues={{ ...initValues }}
        name="risk-level-form"
        title={'Update Quota'}
        visible={visible}
        onSubmit={handleSubmit}
        getFields={getFields}
        onCancel={() => setVisible(false)}
      ></ModalForm>
    </div>
  )
}

export const ManageCreditRiskLevel: React.FC<
  React.PropsWithChildren<{
    tenant: TenantGetTenantResp
  }>
> = ({ tenant }) => {
  const { org_id } = useParams<{ org_id: string }>()
  const { data, refetch } = useGetTenantCreditRiskLevel(org_id, {
    query: {
      refetchInterval: false
    }
  })

  return (
    <div>
      <Row>
        <Col span={8}>
          <Card>
            <Row>
              <Col flex="auto">Level</Col>
              <Col flex="none">{data?.data.credit_risk_level_name}</Col>
            </Row>
            <Divider />
            <Row>
              <Col flex="auto"></Col>
              <Col flex="none">
                <RiskLevelForm
                  initValues={{
                    credit_risk_level_id: data?.data.credit_risk_level_id
                  }}
                  orgId={org_id}
                  onComplete={refetch}
                ></RiskLevelForm>
              </Col>
            </Row>
          </Card>
        </Col>
      </Row>
      <Row style={{ marginTop: 24 }}>
        <Col span={16}>
          <SuspendCard tenant={tenant}></SuspendCard>
        </Col>
      </Row>
    </div>
  )
}