import { PlusOutlined } from '@ant-design/icons'
import { Button, Row, Col, Card, Form, Select } from 'antd'
import _kebabCase from 'lodash.kebabcase'
import React, { useCallback, useEffect, useState, useMemo } from 'react'
import { Link } from 'react-router-dom'

import { addProvider, listProviders } from 'apiClient/api'
import { FormsProvider } from 'apiClient/api/interface'
import ModalForm from 'components/ModalForm'
import { ListToolBar } from 'components/Table'

const { Option } = Select

export default function Providers() {
  const [providers, setProviders] = useState<FormsProvider[]>([])
  const [visible, setVisible] = useState(false)

  useEffect(() => {
    fetch()
  }, [])

  async function fetch() {
    try {
      const data = (await listProviders()).data
      setProviders(data?.items || [])
    } catch (e) {
      console.error(e)
    }
  }

  const onReload = useCallback(() => fetch(), [])

  const onCreate = useCallback(async (payload: FormsProvider) => {
    await addProvider(payload)

    setVisible(false)
    fetch()
  }, [])

  const onModalClose = useCallback(() => setVisible(false), [])

  const actions = useMemo(
    () => [
      <Button
        type="primary"
        name="create"
        icon={<PlusOutlined />}
        onClick={() => setVisible(true)}
      >
        Create
      </Button>
    ],
    []
  )

  const initProvider = useMemo(
    () => ({ name: 'aws', area: '', country_code: '' }),
    []
  )

  const renderFormFields = useCallback(() => {
    return (
      <Form.Item
        name="name"
        label="Cloud Provider"
        rules={[{ required: true }]}
      >
        <Select placeholder="Select a cloud provider" allowClear>
          {['aws', 'gcp'].map((p) => (
            <Option key={p} value={p}>
              {p.toUpperCase()}
            </Option>
          ))}
        </Select>
      </Form.Item>
    )
  }, [])

  return (
    <>
      <ListToolBar
        title="Cloud Providers"
        reload={onReload}
        actions={actions}
      />

      <div className="provider-cards">
        <Row gutter={[{ xs: 8, sm: 16, md: 24, lg: 32 }, 16]}>
          {providers.map((p) => {
            const provider = _kebabCase(p.name)

            return (
              <Col key={p.name} sm={12} md={8} lg={6}>
                <Card
                  title={p.name?.toUpperCase() || ''}
                  extra={<Link to={`/providers/${provider}`}>Details</Link>}
                >
                  <ul>
                    <li>Machines</li>
                    <li>Regions</li>
                    <li>Cluster Profiles</li>
                  </ul>
                </Card>
              </Col>
            )
          })}
        </Row>
      </div>

      {/* Create Provider ModalForm */}
      <ModalForm<FormsProvider>
        visible={visible}
        name="create_provider"
        title="Create a cloud provider"
        initValues={initProvider}
        getFields={renderFormFields}
        onSubmit={onCreate}
        onCancel={onModalClose}
      />
    </>
  )
}