import { Form, Flex, List, Pagination, DatePicker, Button } from 'antd';
import { Fragment, useEffect, useState } from 'react';
import { HistoryOutlined } from '@ant-design/icons';

import dayjs from 'dayjs';
import axios from 'axios';

export default function IndexLog() {
  const [formFilter] = Form.useForm();
  const [data, setData] = useState<any[]>([]);
  const [meta, setMeta] = useState<any>();
  const [loading, setLoading] = useState(false);
  const [filterData, setFilterData] = useState<any>();

  const handleGetData = async (page: number, filter: any) => {
    setLoading(true);
    await axios
      .get('v1/data-scheduling-log', {
        params: { page: page, limit: 10, ...(filter ?? {}) },
      })
      .then((resp: any) => {
        const data = resp?.data?.data ?? [];
        const meta = resp?.data?.meta;
        setMeta(meta);
        setData(data);
        setFilterData(filter);
        setLoading(false);
      })
      .catch(() => {
        setLoading(false);
      });
  };

  useEffect(() => {
    handleGetData(1, {});
  }, []);

  const handleFilter = async () => {
    const { filter_date } = await formFilter.validateFields();
    // const schedule_date_from = filter_date[0] ? dayjs(filter_date[0]).format('YYYY-MM-DD') : undefined;
    // const schedule_date_to = filter_date[1] ? dayjs(filter_date[1]).format('YYYY-MM-DD') : undefined;

    // await handleGetData(1, { schedule_date_from, schedule_date_to });

    const log_created_from = filter_date[0] ? dayjs(filter_date[0]).startOf('days').valueOf() : undefined;
    const log_created_to = filter_date[1] ? dayjs(filter_date[1]).endOf('days').valueOf() : undefined;

    await handleGetData(1, { log_created_from, log_created_to });
  };

  const handleResetFilter = async () => {
    await formFilter.resetFields();
    await handleGetData(1, {});
  };

  return (
    <div>
      <div style={{ marginBottom: 20 }}></div>
      <Form form={formFilter}>
        <Flex gap={8}>
          <Form.Item name="filter_date">
            <DatePicker.RangePicker size="large" />
          </Form.Item>
          <Button size="large" disabled={loading} type="primary" onClick={handleFilter}>
            Filter
          </Button>
          <Button size="large" disabled={loading} onClick={handleResetFilter}>
            Reset
          </Button>
        </Flex>
      </Form>
      <List
        bordered
        style={{ maxHeight: '80vh', overflow: 'auto' }}
        dataSource={data}
        loading={loading}
        renderItem={(item) => (
          <List.Item key={item.id} style={{ padding: 10 }}>
            <Flex vertical gap={8}>
              <Flex gap={8} align="center">
                <HistoryOutlined />
                <div className="font-bold text-md">
                  {dayjs(Number(item.log_created_at)).format('DD-MM-YYYY, HH:mm:ss')}
                </div>
              </Flex>
              <div dangerouslySetInnerHTML={{ __html: item.description }}></div>
            </Flex>
          </List.Item>
        )}
      />
      <div style={{ marginBottom: 10 }}></div>
      {data?.length > 0 && (
        <Fragment>
          <Flex justify="end" className="mt-2">
            <Pagination
              current={meta?.currentPage}
              total={meta?.totalItems}
              pageSize={10}
              onChange={async (page) => {
                await handleGetData(page, filterData);
              }}
            />
          </Flex>
        </Fragment>
      )}
    </div>
  );
}
