import { Group, Select, Button, Flex } from '@tidbcloud/uikit'
import React from 'react'
import { Link } from 'react-router-dom'

import { StateTag } from 'dbaas/screens/Cluster/ClusterInfo'
import { CentralCluster, CentralClusterStatus, ClusterDisplayStatus } from 'dbaas/services'
import { eventTracking } from 'dbaas/utils/tracking'

interface ItemProps extends React.ComponentPropsWithoutRef<'div'> {
  label: string
  status: string
  displayStatus: ClusterDisplayStatus
}

const ClusterSelectItem = ({ label, status, displayStatus, ...others }: ItemProps) => (
  <div {...others}>
    <Group wrap="nowrap">
      <span className="cluster-name">{label}</span> <StateTag displayStatus={displayStatus} />
    </Group>
  </div>
)

export default ({
  clusterId = '',
  clusterList,
  isEdit,
  isLoading,
  onNext,
  onClusterChange,
  cancel
}: {
  clusterId: string
  clusterList: CentralCluster[] | undefined
  isEdit: boolean
  isLoading: boolean
  onNext: () => void
  onClusterChange: (cluster: string) => void
  cancel?: React.ReactNode
}) => {
  const options = clusterList
    ? clusterList.map((c) => ({
        label: c.name,
        value: c.id,
        status: c.status,
        displayStatus: c.display_status!,
        disabled:
          c.status !== CentralClusterStatus.NORMAL &&
          c.status !== CentralClusterStatus.SCALING &&
          c.status !== CentralClusterStatus.UPGRADING &&
          c.status !== CentralClusterStatus.IMPORTING
      }))
    : []

  const handleChange = (value: string | null) => {
    value && onClusterChange(value)
  }

  return (
    <>
      <div className="step-content">
        {isLoading || !clusterList ? null : clusterList.length ? (
          <Flex direction="column" w="40%">
            <div className="form-label">
              <label htmlFor="cluster">Select Cluster</label>
            </div>
            <Select
              value={clusterId}
              searchable
              disabled={isEdit}
              nothingFoundMessage="No results found."
              renderOption={(item: { option: (typeof options)[number] }) => <ClusterSelectItem {...item.option} />}
              data={options}
              onChange={handleChange}
            />
          </Flex>
        ) : (
          <div className="intro">
            Currently you don't have a cluster.
            <Link
              to="/clusters/create-cluster?tier=dedicated"
              onClick={() => {
                eventTracking('Create A Cluster Button in Private Endpoint Form Clicked')
              }}
            >
              Create a Cluster
            </Link>
          </div>
        )}
      </div>
      <div className="step-actions">
        {cancel}
        <Button disabled={!clusterId} type="button" data-mp-event="Choose Cluster Next Button Clicked" onClick={onNext}>
          Next
        </Button>
      </div>
    </>
  )
}