import { Button, Form, Input, Modal, Select } from 'antd'
import React, { useState } from 'react'
import { Link } from 'react-router-dom'

import ModalForm from 'components/ModalForm'

import { projectControllerAddSecondaryCIDR } from '../../../../apiClient/services/devops'

interface AddSecondaryCidrProps {
  orgId: string
  projectId: string
  vpcId: string
  provider: string
  region: string
  onComplete?: () => void
}

export const AddSecondaryCidr: React.FC<
  React.PropsWithChildren<AddSecondaryCidrProps>
> = ({ orgId, projectId, vpcId, provider, region, onComplete }) => {
  const [visible, setVisible] = useState(false)
  const onSubmit = async (data: { secondaryCidr: string; reason: string }) => {
    try {
      const resp = await projectControllerAddSecondaryCIDR(
        orgId,
        projectId,
        vpcId,
        {
          ...data,
          provider: provider,
          region: region
        },
        { timeout: 15 * 1000 }
      )
      const id = resp.data.instance_id
      Modal.success({
        title: 'Info',
        content: (
          <div>
            <p>
              Operation <b>{id}</b> is awaiting approval and can only be started
              after approval.
              <br></br>
              <br></br>
              To check the progress of this operation, please refer to the{' '}
              <a href={`/operations/${id}`}>Detail</a> page.
            </p>
          </div>
        ),
        onOk() {}
      })
      setVisible(false)
      onComplete?.()
    } catch (error) {
      Modal.error({
        title: error.response.data.errcode,
        content: error.response.data.errmsg
      })
    }
  }

  const onCancel = () => {
    setVisible(false)
  }

  const getFields = () => {
    return (
      <>
        <Form.Item>
          <div
            style={{
              padding: 12,
              background: '#f5f5f5',
              borderRadius: 4,
              marginBottom: 8,
              width: '470px'
            }}
          >
            <p style={{ margin: 0, fontWeight: 'bold' }}>Limitations:</p>
            <ol style={{ margin: '8px 0 0 0', paddingLeft: 20 }}>
              <li>Only 4 secondary CIDRs are supported by default.</li>
              <li>
                Newly added Secondary CIDR can't overlap with other CIDRs in
                this VPC.
              </li>
              <li>
                Secondary CIDR block must be within the same private IP range as
                your VPC’s primary CIDR. For example, if your primary VPC CIDR
                is 172.31.0.0/16, you can't add 10.x.x.x or 192.168.x.x as the
                secondary CIDR. For more details, see{' '}
                <Link
                  to={
                    'https://docs.aws.amazon.com/vpc/latest/userguide/vpc-cidr-blocks.html'
                  }
                >
                  here
                </Link>
                .
              </li>
              <li>
                Secondary CIDR feature only supports the clusters using{' '}
                <b>private link</b> connection. The clusters using VPC Peering
                must migrate to private endpoint connection first, otherwise
                secondary CIDR can not be added successfully.
              </li>
            </ol>
          </div>
        </Form.Item>
        <Form.Item name="tenant_id" label="Tenant ID">
          {orgId}
        </Form.Item>
        <Form.Item name="project_id" label="Project ID">
          {projectId}
        </Form.Item>
        <Form.Item name="vpc_id" label="VPC ID">
          {vpcId}
        </Form.Item>
        <Form.Item name="cloud_provider" label="Cloud Provider">
          {provider}
        </Form.Item>
        <Form.Item name="region" label="Region">
          {region}
        </Form.Item>
        <Form.Item
          name="secondary_cidr"
          label="Secondary CIDR"
          required
          labelCol={{ style: { minWidth: '120px' } }}
          rules={[{ required: true, message: 'Required' }]}
        >
          <Input></Input>
        </Form.Item>
        <Form.Item
          label="Reason"
          name="reason"
          required
          rules={[{ required: true, message: 'Required' }]}
        >
          <Input.TextArea
            rows={3}
            placeholder="Reason to add the secondary CIDR"
          />
        </Form.Item>
      </>
    )
  }

  return (
    <>
      <Button type={'link'} onClick={() => setVisible(true)}>
        Add Secondary CIDR
      </Button>
      <ModalForm
        visible={visible}
        title="Add Secondary CIDR"
        onSubmit={onSubmit}
        onCancel={onCancel}
        getFields={getFields}
        okText="Confirm"
        name="add-secondary-cidr-form"
      ></ModalForm>
    </>
  )
}