import { useNavigate, useParams } from 'react-router-dom';
import { useEffect, useState } from 'react';
import { Row, Col, Space, Table, Typography } from 'antd';
import { formatDate, isNotEmpty } from '@/utils/commons';
import BackBtn from '@/components/BackBtn';
import { fetchInvoicePaidDetail } from '@/stores/Invoice';
import { usingStorage } from '@/hooks/usingStorage';

const { Title } = Typography;

function PaidDetail() {
  const navigate = useNavigate();
  const {travelAgencyId, } = usingStorage();
  const { flid } = useParams();

  const [invoicePaidDetail, setInvoicePaidDetail] = useState([]);
  useEffect(() => {
    fetchInvoicePaidDetail(travelAgencyId, flid).then(res => setInvoicePaidDetail(res));
  }, [flid]);

  const invoicePaidColumns = [
    {
      title: 'Ref.NO',
      dataIndex: 'fl2_GroupName',
      key: 'fl2_GroupName',
    },
    {
      title: 'Arrival date',
      key: 'fl2_ArriveDate',
      dataIndex: 'fl2_ArriveDate',
      render: (text, record) => (isNotEmpty(text) ? formatDate(new Date(text)) : ''),
    },
    {
      title: 'Payment amount',
      key: 'fl2_price',
      dataIndex: 'fl2_price',
    },
    {
      title: 'Currency',
      key: 'fl2_memo',
      dataIndex: 'fl2_memo',
    },
  ];

  return (
    <Space direction='vertical' style={{ width: '100%' }}>
      <Row gutter={16}>
        <Col span={20}></Col>
        <Col span={4}>
          <BackBtn />
        </Col>
      </Row>
      <Title level={3}></Title>
      <Row>
        <Col md={24} lg={24} xxl={24}>
          <Table bordered columns={invoicePaidColumns} dataSource={invoicePaidDetail} />
        </Col>
      </Row>
    </Space>
  );
}

export default PaidDetail;