import { useNavigate } from "react-router-dom";
import { Row, DatePicker, Flex, Col, Typography } from "antd";
import dayjs from "dayjs";
import { usingStorage } from "@/hooks/usingStorage";

function PickYear() {
  const navigate = useNavigate();
  const { travelAgencyId } = usingStorage();

  return (
    <>
      <Row justify="center">
        <Col span={4}>
          <Flex gap="middle" vertical>
            <Typography.Title className="text-center" level={3}>
              请选择采购年份
            </Typography.Title>
            <DatePicker
              className="w-full"
              size="large"
              variant="underlined"
              needConfirm
              inputReadOnly={true}
              minDate={dayjs().add(-30, "year")}
              maxDate={dayjs().add(2, "year")}
              allowClear={false}
              picker="year"
              open={true}
              onOk={(date) => {
                const useYear = date.year();
                navigate(`/products/${travelAgencyId}/${useYear}/all/edit`);
              }}
            />
          </Flex>
        </Col>
      </Row>
    </>
  );
}
export default PickYear;