import { Button, DatePicker, Typography, Input, Table } from 'antd'
import { ColumnsType } from 'antd/lib/table'
import { capitalize } from 'lodash'
import moment from 'moment'
import React, { useEffect, useMemo, useState } from 'react'
import { Link } from 'react-router-dom'

import { releaseControllerListReleases } from 'apiClient/services/devops'
import { ReleaseRelease } from 'apiClient/services/devops/interface'
import SearchBar from 'components/SearchBar'

import { ListToolBar, useTable } from '../../../components/Table'
import { toLocal, toLocalDate } from '../Maintenance/Detail'

export const Release = () => {
  const [listReleaseParam, setListReleaseParam] = useState<{
    release_before: number | undefined
    release_after: number | undefined
    name: string | undefined
  }>({
    release_before: moment().add(2, 'weeks').unix(),
    release_after: undefined,
    name: undefined
  })

  const getData = (params?: Partial<PageInfo>) =>
    releaseControllerListReleases({
      page: params?.page,
      per_page: params?.pageSize,
      ...listReleaseParam
    })

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

  const columns: ColumnsType<ReleaseRelease> = [
    {
      title: 'Name',
      render: (_: any, record) => {
        return record.name
      }
    },
    {
      title: 'Start Date',
      render: (_: any, record) => {
        return toLocalDate(record.window_start_at)
      }
    },
    {
      title: 'End Date',
      render: (_: any, record) => {
        return toLocalDate(record.window_end_at)
      }
    },
    {
      title: 'status',
      render: (_: any, record) => {
        return capitalize(record.status)
      }
    },
    {
      title: 'Action',
      render: (_: any, record) => {
        return (
          <Button type="primary">
            <Link to={`/release/${record.id}`}>Detail</Link>
          </Button>
        )
      }
    }
  ]

  const actions = useMemo(
    () => [
      <DatePicker.RangePicker
        value={[
          listReleaseParam.release_after
            ? moment.unix(listReleaseParam.release_after)
            : null,
          listReleaseParam.release_before
            ? moment.unix(listReleaseParam.release_before)
            : moment.unix(moment().add(2, 'weeks').unix())
        ]}
        onChange={(val) =>
          setListReleaseParam((pre) => ({
            ...pre,
            release_before: val?.[1]
              ? val[1].unix()
              : moment().add(2, 'weeks').unix(),
            release_after: val?.[0]?.unix()
          }))
        }
      />,
      <Input
        value={listReleaseParam.name}
        onChange={(event) =>
          setListReleaseParam((pre) => ({ ...pre, name: event.target.value }))
        }
        placeholder="release name"
      ></Input>,
      <Button type="primary" onClick={reload}>
        Search
      </Button>
    ],
    [listReleaseParam]
  )

  return (
    <div>
      <ListToolBar
        title={
          <span>
            <span style={{ fontSize: 20, fontWeight: 600 }}>Release</span>{' '}
            <Typography.Link
              href="https://pingcap.feishu.cn/wiki/UTEzwQ4AViOtEVk8PTRcWD8onih"
              target="_blank"
              rel="noopener noreferrer"
              style={{ fontSize: 12 }}
            >
              Info
            </Typography.Link>
            <span style={{ fontSize: 12, margin: '0 4px' }}>|</span>
            <Typography.Link
              href="https://pingcap.feishu.cn/wiki/ZSikwjWhGiqEtlkKsBdcf9kNnrf"
              target="_blank"
              rel="noopener noreferrer"
              style={{ fontSize: 12 }}
            >
              Kernel Image SOP
            </Typography.Link>
          </span>
        }
        actions={actions}
        reload={() => {
          setListReleaseParam({
            release_before: moment().add(2, 'weeks').unix(),
            release_after: undefined,
            name: undefined
          })
          return reload()
        }}
      ></ListToolBar>
      <Table<ReleaseRelease>
        columns={columns}
        rowKey="id"
        dataSource={dataSource}
        loading={loading}
        pagination={paginationProps}
        size="small"
        onChange={onTableChange}
      ></Table>
    </div>
  )
}

export default Release