import { ReloadOutlined } from '@ant-design/icons'
import { Button, Input, Form, FormInstance, Space, Table, Select } from 'antd'
import { ColumnsType } from 'antd/lib/table'
import React, { useMemo, useState } from 'react'
import { Link, useParams } from 'react-router-dom'

import { projectControllerListVPCs } from 'apiClient/services/devops'
import {
  ProjectListVPCsResp,
  ProjectVPC
} from 'apiClient/services/devops/interface'
import { ListToolBar, useTable } from 'components/Table'

import { AddSecondaryCidr } from './AddSecondaryCidr'
import CloudProviderSelect from './CloudProviderSelect'

export default function ProjectCIDR() {
  const { org_id, project_id } = useParams<{
    org_id: string
    project_id: string
  }>()

  const [cloudProvider, setCloudProvider] = useState<string>('aws')

  const getData = () =>
    projectControllerListVPCs(org_id, project_id, {
      provider: cloudProvider
    })

  const { dataSource, loading, reload, paginationProps, onTableChange } =
    useTable<ListData<ProjectVPC>>(getData, [], {
      pagination: false
    })

  const handleCloudProviderChange = (cloudProvider: any) => {
    setCloudProvider(cloudProvider)
    return reload()
  }

  const columns: ColumnsType<ProjectVPC> = [
    {
      title: 'Provider',
      render: (_: any, record) => {
        return record.cloud_provider
      }
    },
    {
      title: 'Region',
      render: (_: any, record) => {
        return record.region
      }
    },
    {
      title: 'VPC ID',
      render: (_: any, record) => {
        return record.id
      }
    },
    {
      title: 'CIDR',
      render: (_: any, record) => {
        return record.tidb_cloud_cidr_block
      }
    },
    {
      title: 'Secondary CIDRs',
      render: (_: any, record) => {
        if (!record.secondary_cidrs) {
          return ''
        }
        return record.secondary_cidrs.join(', ')
      }
    },
    {
      title: 'Actions',
      width: 300,
      render(_: any, record) {
        return (
          <div key={record.id}>
            <AddSecondaryCidr
              orgId={org_id}
              projectId={project_id}
              vpcId={record.id!}
              provider={record.cloud_provider!}
              region={record.region!}
            />
          </div>
        )
      }
    }
  ]
  return (
    <>
      <div
        style={{ marginBottom: '10px', display: 'flex', alignItems: 'center' }}
      >
        <Space size={[15, 20]} wrap style={{ alignItems: 'center' }}>
          <h4 style={{ margin: 0 }}>Cloud Provider:</h4>
          <CloudProviderSelect
            onChangeFunc={handleCloudProviderChange}
          ></CloudProviderSelect>
        </Space>
        <Button
          icon={<ReloadOutlined />}
          onClick={reload}
          type="primary"
          loading={loading}
          style={{ marginLeft: '20px' }}
        >
          Reload
        </Button>
      </div>
      <Table<ProjectVPC>
        columns={columns}
        rowKey="id"
        dataSource={dataSource}
        loading={loading}
        size="small"
      ></Table>
    </>
  )
}