import { Button, Checkbox, Input, Table } from 'antd'
import { ColumnsType, TableProps } from 'antd/lib/table'
import { Dayjs } from 'dayjs'
import dayjs from 'dayjs'

import { FormsARTableRecordResponse } from 'apiClient/services/billing/interface'
import { DatePicker } from 'components/DatePicker'
import { ListToolBar } from 'components/Table'

import { getARTablePaymentType } from './shared'

type Props = {
  columns: ColumnsType<FormsARTableRecordResponse>
  draftFilter: {
    year: number
    month: number
    isEstimated: boolean
    tenantId: string
  }
  isDeleting: boolean
  isDownloadingList: boolean
  isFetching: boolean
  isQueryLocked: boolean
  maxMonth: Dayjs
  onDownload: () => void
  onEstimatedChange: (checked: boolean) => void
  onMonthChange: (value: Dayjs) => void
  onReset: () => void
  onSearch: () => void
  onTableChange: TableProps<FormsARTableRecordResponse>['onChange']
  onTenantIdChange: (value: string) => void
  pageConfig: {
    page: number
    pageSize: number
  }
  tableData: FormsARTableRecordResponse[]
  total: number
}

export const ARTableList = ({
  columns,
  draftFilter,
  isDeleting,
  isDownloadingList,
  isFetching,
  isQueryLocked,
  maxMonth,
  onDownload,
  onEstimatedChange,
  onMonthChange,
  onReset,
  onSearch,
  onTableChange,
  onTenantIdChange,
  pageConfig,
  tableData,
  total
}: Props) => {
  return (
    <>
      <ListToolBar
        title="AR Table"
        actions={[
          <div
            key="estimated"
            style={{
              alignItems: 'center',
              display: 'flex',
              height: 32
            }}
          >
            <Checkbox
              disabled={isQueryLocked}
              checked={draftFilter.isEstimated}
              onChange={(event) => {
                onEstimatedChange(event.target.checked)
              }}
            >
              Is Estimated
            </Checkbox>
          </div>,
          <DatePicker
            key="month"
            allowClear={false}
            disabled={isQueryLocked}
            picker="month"
            value={dayjs()
              .year(draftFilter.year)
              .month(draftFilter.month - 1)
              .startOf('month')}
            disabledDate={(date) => {
              return !!date && date > maxMonth
            }}
            onChange={(date) => {
              if (date) {
                onMonthChange(date)
              }
            }}
          />,
          <Input
            key="tenant_id"
            allowClear
            disabled={isQueryLocked}
            style={{ width: 180 }}
            placeholder="Tenant ID"
            value={draftFilter.tenantId}
            onChange={(event) => {
              onTenantIdChange(event.target.value)
            }}
            onPressEnter={onSearch}
          />,
          <Button
            key="search"
            type="primary"
            disabled={isQueryLocked}
            onClick={onSearch}
          >
            Search
          </Button>,
          <Button key="reset" disabled={isQueryLocked} onClick={onReset}>
            Reset
          </Button>,
          <Button
            key="download"
            loading={isDownloadingList}
            onClick={onDownload}
          >
            Download
          </Button>
        ]}
      />
      <Table<FormsARTableRecordResponse>
        rowKey={(record) =>
          record.id?.toString() ||
          `${record.bill_month || 'unknown'}-${record.tenant_id || 'unknown'}-${
            getARTablePaymentType(record) || 'unknown'
          }`
        }
        columns={columns}
        dataSource={tableData}
        loading={isFetching || isDeleting}
        size="small"
        scroll={{ x: 1100 }}
        pagination={{
          current: pageConfig.page,
          disabled: isQueryLocked,
          pageSize: pageConfig.pageSize,
          total,
          showSizeChanger: true
        }}
        onChange={onTableChange}
      />
    </>
  )
}

export default ARTableList