import { t } from '@lingui/macro';
import { Button, DatePicker, Form, Select } from 'antd';
import { SbtPageHeader } from 'components/page-header';
import { ReportOverViewTable } from 'components/report-detail';
import { Dayjs } from 'dayjs';
import { useOverViewReport } from 'queries/report';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';

export interface ReportFormValues {
  dateRange: [Dayjs, Dayjs];
  subsidiary: string;
}

const Dashboard = () => {
  const navigate = useNavigate();
  const [form] = Form.useForm<ReportFormValues>();
  const [pagination, setPagination] = useState({
    page: 1,
    page_size: 10,
  });
  const [fromData, setFormData] = useState<{
    start_date: string;
    end_date: string;
    subsidiary: string;
  }>({
    start_date: '',
    end_date: '',
    subsidiary: '',
  });
  const { isLoading, data } = useOverViewReport({
    start_date: fromData.start_date,
    end_date: fromData.end_date,
    subsidiary: fromData.subsidiary,
  });
  const handleSubmit = (values: ReportFormValues) => {
    console.log('check values >>>', values);
    setFormData({
      start_date: values.dateRange[0].format('YYYY-MM-DDTHH:mm:ssZ'),
      end_date: values.dateRange[1].format('YYYY-MM-DDTHH:mm:ssZ'),
      subsidiary: values.subsidiary,
    });
  };

  return (
    <>
      <SbtPageHeader
        title={t`Dashboard`}
        extra={
          <>
            {/* <Button type='primary' icon={<DownloadOutlined />}>
              Download
            </Button> */}
            {/* <Button type='primary' onClick={() => navigate('/reports')}>
              {t`Go to Report page`}
            </Button> */}
          </>
        }
      />
      <Form
        form={form}
        style={{ display: 'flex', flexDirection: 'row', gap: 10 }}
        onFinish={handleSubmit}
      >
        <Form.Item
          name='dateRange'
          label={t`Date`}
          rules={[
            {
              required: true,
              message: 'Please select a date range',
            },
          ]}
        >
          <DatePicker.RangePicker />
        </Form.Item>

        <Form.Item
          name='subsidiary'
          label={t`Subsidiary`}
          rules={[
            {
              required: true,
              message: 'Please select a subsidiary',
            },
          ]}
        >
          <Select
            placeholder='Select a subsidiary'
            style={{ width: 200 }}
            options={[
              { value: 'all', label: 'ALL' },
              { value: 'sesp', label: 'SESP' },
              { value: 'seau', label: 'SEAU' },
            ]}
            allowClear
          />
        </Form.Item>
        <Form.Item>
          <Button type='primary' htmlType='submit' style={{ height: 38 }}>
            Submit
          </Button>
        </Form.Item>
      </Form>
      <ReportOverViewTable
        pagination={pagination}
        setPagination={setPagination}
        isLoading={isLoading}
        data={data}
      />
    </>
  );
};

export default Dashboard;