import { Badge, Button, Table } from 'antd'
import { ColumnsType } from 'antd/lib/table'
import { useCallback, useMemo, useState } from 'react'
import { Link, useParams } from 'react-router-dom'

import { operationControllerListInstances } from 'apiClient/services/devops'
import {
  OperationControllerListInstancesParams,
  OperationControllerListInstancesPhase,
  OperationInstance,
  OperationOperationTarget
} from 'apiClient/services/devops/interface'
import SearchBar from 'components/SearchBar'
import { ListToolBar, useTable } from 'components/Table'
import { toLocal } from 'pages/Devops/Maintenance/Detail'

import CreateOperation from './CreateOperation'
import { InstancePhaseDisplay } from './utils'

export default function Operations({
  target_type,
  target_id
}: {
  target_type?: OperationOperationTarget
  target_id?: string
}) {
  const [searchParams, setSearchParams] =
    useState<OperationControllerListInstancesParams>({})
  const reloadInit = () => {
    return reload()
  }

  const getData = (params?: Partial<PageInfo>) =>
    target_type && target_id
      ? operationControllerListInstances({
          page: params?.page,
          per_page: params?.pageSize,
          type: target_type,
          target_id: target_id
        })
      : operationControllerListInstances({
          page: params?.page,
          per_page: params?.pageSize,
          phase: searchParams.phase ? searchParams.phase : undefined,
          applicant: searchParams.applicant
            ? searchParams.applicant
            : undefined,
          operation: searchParams.operation ? searchParams.operation : undefined
        })

  const renderStatusCell = useCallback((_: any, record: OperationInstance) => {
    return <InstancePhaseDisplay phase={record.phase} />
  }, [])

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

  const columns: ColumnsType<OperationInstance> = [
    {
      title: 'ID',
      render: (_: any, record) => {
        return record.id
      }
    },
    {
      title: 'Operation',
      render: (_: any, record) => {
        return record.operation
      }
    },
    {
      title: 'Applicant',
      render: (_: any, record) => {
        return record.applicant
      }
    },
    {
      title: 'Created At',
      render: (_: any, record) => {
        return toLocal(record.created_at)
      }
    },
    {
      title: 'Reason',
      render: (_: any, record) => {
        return record.reason
      }
    },
    {
      title: 'Phase',
      render: renderStatusCell
    },
    {
      title: 'Action',
      render: (_: any, record) => {
        return (
          <Button type="primary">
            <Link to={`/operations/${record.id}`}>Detail</Link>
          </Button>
        )
      }
    }
  ]

  const onSearch = (query: {
    phase: string
    applicant: string
    operation: string
  }) => {
    if (query) {
      if (query.phase !== '') {
        setSearchParams({
          phase: query.phase as OperationControllerListInstancesPhase
        })
      }
      if (query.applicant) {
        setSearchParams({ applicant: query.applicant })
      }
      if (query.operation) {
        setSearchParams({ operation: query.operation })
      }
      return reload()
    }
    setSearchParams({})
    return reload()
  }

  const actions = useMemo(
    () => [
      <SearchBar
        defaultValue={{
          phase: ''
        }}
        options={['phase', 'applicant', 'operation']}
        labels={['phase', 'applicant', 'operation']}
        fetcher={onSearch}
      />
    ],
    []
  )

  return (
    <div>
      <div style={{ display: 'flex' }}>
        {!target_type ? (
          <div>
            <CreateOperation
              op="non-standard operation"
              init_categories={['nonstandard']}
            ></CreateOperation>
            <CreateOperation op="other Operations"></CreateOperation>
            <Link to="/operations/tenant-credits-monthly-report">
              Tenant Credits Monthly Report
            </Link>
          </div>
        ) : (
          <></>
        )}
        {!target_type ? (
          <div style={{ flex: 1 }}>
            <ListToolBar actions={actions} reload={reloadInit} />
          </div>
        ) : (
          <></>
        )}
      </div>
      <Table<OperationInstance>
        columns={columns}
        rowKey="id"
        dataSource={dataSource}
        loading={loading}
        pagination={paginationProps}
        size="small"
        onChange={onTableChange}
      ></Table>
    </div>
  )
}