import { PlusOutlined } from '@ant-design/icons'
import { useSessionStorageState } from 'ahooks'
import { Button, Input, Space, Table, TableProps, Tag } from 'antd'
import { ColumnsType } from 'antd/lib/table'
import { Moment, now } from 'moment'
import React, { useCallback, useMemo, useState } from 'react'
import { Link } from 'react-router-dom'

import {
  createK8sUpgradeTask,
  listK8sUpgradeTasks
} from 'apiClient/services/devops'
import {
  ListK8sUpgradeTasksCloudProviderItem,
  ListK8sUpgradeTasksStatusItem,
  K8supgradeTask,
  ListK8sUpgradeTasksSortBy,
  K8supgradeCreateTaskReq
} from 'apiClient/services/devops/interface'
import { ListToolBar, useTable } from 'components/Table'

import ModalForm from '../../../../components/ModalForm'
import { toLocal } from '../../Maintenance/Detail'

import K8sUpgradeTaskModalFormFields from './CreateTaskForm'

interface TaskParams {
  page?: number
  per_page?: number
  id?: number | undefined
  name?: string | undefined
  order?: 'asc' | 'desc'
  sort_by?: ListK8sUpgradeTasksSortBy
  status?: ListK8sUpgradeTasksStatusItem[]
  search?: string
  cloud_provider?: ListK8sUpgradeTasksCloudProviderItem[]
  eos_version?: string[]
}

export type K8sUpgradeTaskForm = {
  cloud_provider: string
  deadline: Moment
  eos_version: string
  max_restart_times: number
  name: string
  applicant: string
  selector: string
  selector_value?: string
  selector_values?: string[]
}

export const K8sUpgradeTaskList: React.FC<
  React.PropsWithChildren<unknown>
> = () => {
  const [pageConfig, setPageConfig] = useSessionStorageState(
    'task_page_config',
    {
      defaultValue: {
        page: 1,
        pageSize: 0
      }
    }
  )
  const [taskFilter, setTaskFilter] = useState<TaskParams>({
    // status: [ListK8sUpgradeTasksStatusItem.running]
  })
  const [searchParams, setSearchParams] = useSessionStorageState<TaskParams>(
    'search_params',
    {
      defaultValue: {
        search: ''
      }
    }
  )
  const [modalOpen, setModalOpen] = useState<boolean>(false)

  const getData = (params?: Partial<PageInfo>) =>
    listK8sUpgradeTasks({
      page: pageConfig.page,
      per_page: pageConfig.pageSize || params?.pageSize,
      ...searchParams,
      ...taskFilter
    })

  const {
    dataSource,
    loading,
    reload,
    paginationProps
    // onTableChange
  } = useTable<ListData<K8supgradeTask>>(getData, [], {
    pagination: true,
    current: pageConfig.page
  })

  const renderActionCell = useCallback((_: any, record: K8supgradeTask) => {
    return (
      <Space>
        <Link
          to={`/k8sUpgradeTask/${record.id}?name=${record.name}`}
          // target='_blank'
        >
          Detail
        </Link>
      </Space>
    )
  }, [])

  const renderStatusCell = useCallback((_: any, record: K8supgradeTask) => {
    let color
    const { status } = record
    //TODO
    switch (status) {
      case 'pending':
        color = '#a1a3a6'
        break
      case 'approving':
        color = 'orange'
        break
      case 'running':
        color = 'blue'
        break
      case 'completed':
        color = 'green'
        break
      case 'cancelled':
        color = '#77787b'
        break
      default:
        color = 'blue'
    }
    return (
      <Space>
        <Tag color={color} key={status}>
          {status}
        </Tag>
      </Space>
    )
  }, [])

  const renderFormFields = () => {
    return <K8sUpgradeTaskModalFormFields />
  }
  const columns = useMemo(() => {
    const cols: ColumnsType<K8supgradeTask> = [
      {
        title: 'ID',
        render: (_: any, record) => {
          return record.id
        }
      },
      {
        title: 'Name',
        render: (_: any, record) => {
          return record.name
        }
      },
      {
        title: 'Applicant',
        render: (_: any, record) => {
          return record.applicant
        }
      },
      {
        title: 'Cloud Provider',
        dataIndex: 'cloud_provider',
        width: 120,
        filterMultiple: true,
        filters: [
          {
            text: ListK8sUpgradeTasksCloudProviderItem.aws,
            value: ListK8sUpgradeTasksCloudProviderItem.aws
          },
          {
            text: ListK8sUpgradeTasksCloudProviderItem.gcp,
            value: ListK8sUpgradeTasksCloudProviderItem.gcp
          }
        ]
      },
      {
        title: 'Create At',
        render: (_: any, record) => {
          return toLocal(record.created_at)
        }
      },
      {
        title: 'EOS Version',
        render: (_: any, record) => {
          return record.version_to_be_upgraded
        }
      },
      {
        title: 'Status',
        dataIndex: 'status',
        render: renderStatusCell,
        filterMultiple: true,
        filters: [
          {
            text: ListK8sUpgradeTasksStatusItem.pending,
            value: ListK8sUpgradeTasksStatusItem.pending
          },
          {
            text: ListK8sUpgradeTasksStatusItem.reviewing,
            value: ListK8sUpgradeTasksStatusItem.reviewing
          },
          {
            text: ListK8sUpgradeTasksStatusItem.running,
            value: ListK8sUpgradeTasksStatusItem.running
          },
          {
            text: ListK8sUpgradeTasksStatusItem.completed,
            value: ListK8sUpgradeTasksStatusItem.completed
          },
          {
            text: ListK8sUpgradeTasksStatusItem.cancelled,
            value: ListK8sUpgradeTasksStatusItem.cancelled
          }
        ]
      },
      {
        title: 'Deadline',
        render: (_: any, record) => {
          return toLocal(record.deadline)
        }
      },
      {
        title: 'Action',
        fixed: 'right',
        width: 100,
        dataIndex: 'action',
        render: renderActionCell
      }
    ]

    return cols
  }, [
    renderStatusCell,
    renderActionCell
    // roles
  ])

  const onSearch = (query: TaskParams | null) => {
    setSearchParams({
      search: query?.search,
      id: query?.id,
      name: query?.name
    })
    setPageConfig({ page: 1, pageSize: 0 })
    return reload()
  }

  const actions = useMemo(
    () => [
      <Button key="clusterSummary" type="default" name="clusterSummary">
        <Link to="/k8sUpgradeTask/clusterSummary">Cluster Summary</Link>
      </Button>,
      <Button
        key="createTask"
        type="primary"
        name="create"
        icon={<PlusOutlined />}
        onClick={() => {
          setModalOpen(!modalOpen)
        }}
      >
        Create K8S Upgrade Task
      </Button>
    ],
    []
  )

  const handleCreate = useCallback(
    async (payload: K8sUpgradeTaskForm) => {
      const selectorType = payload.selector as
        | 'none'
        | 'internal'
        | 'non_prod'
        | 'by_region'
        | 'by_tenant_ids'
        | 'by_project_ids'
        | 'by_tidb_cluster_ids'
        | 'by_k8s_names'

      const buildSelectorValue = () => {
        if (selectorType === 'by_region') return payload.selector_value

        const values = (payload.selector_values ?? [])
          .map((v) => v?.trim())
          .filter(Boolean) as string[]
        if (values.length === 0) return undefined

        switch (selectorType) {
          case 'by_tenant_ids':
            return JSON.stringify({ tenant_ids: values })
          case 'by_project_ids':
            return JSON.stringify({ project_ids: values })
          case 'by_tidb_cluster_ids':
            return JSON.stringify({ tidb_cluster_ids: values })
          case 'by_k8s_names':
            return JSON.stringify({ k8s_names: values })
          default:
            return undefined
        }
      }

      const req: K8supgradeCreateTaskReq = {
        cloud_provider: payload.cloud_provider,
        eos_version: payload.eos_version,
        deadline: payload.deadline.unix(),
        name: payload.name!,
        max_restart_times: payload.max_restart_times!,
        selector_type: selectorType,
        selector_value: buildSelectorValue()
      }
      return createK8sUpgradeTask(req)
        .then(() => {
          setModalOpen(false)
          reload()
        })
        .catch((e) => {
          // HACK: overide the default error of axios to enable showing error message in ModalForm
          if (e.response.data.errmsg && e.response.status)
            throw {
              response: {
                data: {
                  message: e.response.status + ': ' + e.response.data.errmsg
                }
              }
            }
          else throw e
        })
    },
    [reload]
  )

  const handleTabChange: TableProps<K8supgradeTask>['onChange'] = (
    pagination,
    filters,
    sorter
  ) => {
    let sort: TaskParams = {
      sort_by: undefined,
      order: undefined
    }
    if (!Array.isArray(sorter)) {
      sort.order =
        sorter.order === undefined
          ? undefined
          : sorter.order === 'ascend'
          ? 'asc'
          : 'desc'
      sort.sort_by =
        sorter.order === undefined
          ? undefined
          : (sorter.field as ListK8sUpgradeTasksSortBy)
    }
    setTaskFilter({
      ...taskFilter,
      ...filters,
      ...sort
    })
    return reload()
  }

  const onPaginationChange = (page: number, pageSize?: number) => {
    setPageConfig({ page, pageSize: pageSize || 0 })
  }

  return (
    <>
      <ListToolBar
        reload={reload}
        actions={[
          actions
          // <Input.Group compact className="list-search-bar-container">
          //   <Input.Search
          //     placeholder="Search by ID/Name"
          //     defaultValue={searchParams.search || ''}
          //     style={{ width: 240 }}
          //     onSearch={(value: string) => {
          //       onSearch(value ? { search: value.trim() } : null)
          //     }}
          //     allowClear
          //   />
          // </Input.Group>
        ]}
      />
      <Table
        columns={columns}
        rowKey="id"
        dataSource={dataSource}
        loading={loading}
        size="small"
        // fix run time error
        // scroll={{ x: 1400 }}
        pagination={{
          ...paginationProps,
          current: pageConfig.page,
          pageSize: pageConfig.pageSize || paginationProps.pageSize,
          onChange: onPaginationChange
        }}
        onChange={handleTabChange}
      />
      <ModalForm<K8sUpgradeTaskForm>
        // initValues={
        //   {
        //     applicant: currUserEmail,
        //     cloud_provider: 'aws',
        //     eos_version: "",
        //     max_restart_times: 2,
        //     name: "",
        //   }
        // }
        visible={!!modalOpen}
        name="k8s upgrade task"
        title="Create a K8S Upgrade Task"
        getFields={renderFormFields}
        onSubmit={handleCreate}
        onCancel={() => {
          setModalOpen(false)
        }}
      />
    </>
  )
}