import { t } from '@lingui/macro';
import { Button } from 'antd';
import { SbtPageHeader } from 'components/page-header';
import { ReportOverViewTable } from 'components/report-detail';
import { Dayjs } from 'dayjs';
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({
  //   page: pagination.page,
  //   page_size: pagination.page_size,
  //   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'>
            Submit
          </Button>
        </Form.Item>
      </Form> */}
      <ReportOverViewTable />
    </>
  );
};

export default Dashboard;