import {
  LeftOutlined,
  QuestionCircleOutlined,
  RightOutlined
} from '@ant-design/icons'
import { Button, Descriptions, Drawer, Popconfirm, Space } from 'antd'
import { ReactNode } from 'react'

import { FormsARTableRecordResponse } from 'apiClient/services/billing/interface'

import {
  AR_TABLE_DRAWER_FIELDS,
  ARTableDisplayField,
  formatARTableFieldLabel
} from './shared'

type Props = {
  currentDrawerIndex: number
  drawerRecord: FormsARTableRecordResponse | null
  isDeleting: boolean
  isDrawerEditing: boolean
  isUpdating: boolean
  onClose: () => void
  onDelete: () => void
  onEdit: () => void
  onNext: () => void
  onPrevious: () => void
  onSave: () => void
  onCancel: () => void
  renderFieldContent: (field: ARTableDisplayField) => ReactNode
  tableDataLength: number
}

export const ARTableDrawer = ({
  currentDrawerIndex,
  drawerRecord,
  isDeleting,
  isDrawerEditing,
  isUpdating,
  onCancel,
  onClose,
  onDelete,
  onEdit,
  onNext,
  onPrevious,
  onSave,
  renderFieldContent,
  tableDataLength
}: Props) => {
  return (
    <Drawer
      title={
        <div
          style={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center'
          }}
        >
          <span>{`AR Table Record ${drawerRecord?.id || ''}`}</span>
          <Space size="small">
            {drawerRecord &&
              (isDrawerEditing ? (
                <>
                  <Button type="primary" loading={isUpdating} onClick={onSave}>
                    Save
                  </Button>
                  <Button onClick={onCancel}>Cancel</Button>
                </>
              ) : (
                <Button onClick={onEdit}>Edit</Button>
              ))}
            <Popconfirm
              icon={<QuestionCircleOutlined style={{ color: 'red' }} />}
              title="Are you sure to delete this record?"
              okText="Yes"
              cancelText="No"
              onConfirm={onDelete}
            >
              <Button danger disabled={!drawerRecord?.id} loading={isDeleting}>
                Delete
              </Button>
            </Popconfirm>
          </Space>
        </div>
      }
      width={720}
      visible={!!drawerRecord}
      onClose={onClose}
      footer={
        <Space style={{ width: '100%', justifyContent: 'space-between' }}>
          <Button
            icon={<LeftOutlined />}
            loading={isUpdating}
            disabled={isDrawerEditing || currentDrawerIndex <= 0}
            onClick={onPrevious}
          >
            Previous
          </Button>
          <span>
            {currentDrawerIndex >= 0 ? currentDrawerIndex + 1 : 0} /{' '}
            {tableDataLength}
          </span>
          <Button
            icon={<RightOutlined />}
            loading={isUpdating}
            disabled={
              isDrawerEditing ||
              currentDrawerIndex < 0 ||
              currentDrawerIndex >= tableDataLength - 1
            }
            onClick={onNext}
          >
            Next
          </Button>
        </Space>
      }
    >
      <Descriptions column={1} size="small" bordered>
        {AR_TABLE_DRAWER_FIELDS.map((field) => (
          <Descriptions.Item key={field} label={formatARTableFieldLabel(field)}>
            {renderFieldContent(field)}
          </Descriptions.Item>
        ))}
      </Descriptions>
    </Drawer>
  )
}

export default ARTableDrawer