import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
import { Button, Form, Input, DatePicker } from "antd";
import { useCallback, useEffect } from "react";
import _ from "lodash";
import { useMainContext } from "../layout/MainProvider";
import DailyTable from "./DailyTable";
import DailyModal from "./DailyModal";
import dayjs from "dayjs";

export default function DailyReport() {
  const { form, formValue, setFormValue, setVisible, setSearchValue, editingRecord } = useMainContext();

  useEffect(() => {
    setFormValue({
      staffId: "",
      trainContentId: "",
      content: "",
      isPresent: true,
      date: dayjs().format('YYYY-MM-DD')
    });
  }, []);

  const handleNew = () => {
    form.setFieldsValue(formValue);
    setVisible(true);
  };

  const handleSearch = useCallback(
    _.debounce((value: string) => {
      setSearchValue(value);
    }, 500),
    []
  );

  const handleDateChange = (date) => {
    if (!date) return;
    // 更新当前选择的日期
    const newFormValue = { ...formValue, date: date.format('YYYY-MM-DD') };
    setFormValue(newFormValue);
  };

  return (
    <div className="p-2 min-h-screen bg-gradient-to-br">
      <Form>
        <div className="p-4 h-full flex flex-col">
          <div className="max-w-full mx-auto flex-1 flex flex-col">
            <div className="flex justify-between mb-4 space-x-4 items-center">
              <div className="text-2xl">每日训练填报</div>
              <DatePicker
                defaultValue={dayjs()}
                onChange={handleDateChange}
                allowClear={false}
                className="w-40"
              />
              <div className="relative w-1/3">
                <Input
                  placeholder="输入姓名搜索"
                  onChange={(e) => handleSearch(e.target.value)}
                  className="pl-10 w-full border"
                />
                <MagnifyingGlassIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5" />
              </div>
              <Button
                type="primary"
                onClick={handleNew}
                className="font-bold py-2 px-4 rounded"
              > 
                新建填报
              </Button>
            </div>
            <DailyTable></DailyTable>
            <DailyModal></DailyModal>
          </div>
        </div>
      </Form>
    </div>
  );
}