"use client";

import { DateSelect } from "@/components/search-field-core/date-select";
import { Types } from "@/context/search/search.reducer";
import { formatSearchDate, parseSearchDate } from "@/utils/jalali";
import { Button } from "@/components/button";
import { useSearch } from "@/context/search";
import { useTranslation } from "react-i18next";
import { useRouter } from "next/navigation";

const SearchDate = () => {
  const { state, dispatch } = useSearch();
  const { t } = useTranslation();
  const router = useRouter();
  const parsed = parseSearchDate(state.date.query);
  return (
    <section className="xl:container px-4 pt-7 h-[calc(100svh-80px)] flex flex-col justify-between ">
      <DateSelect
        onChange={(value) => {
          dispatch({
            type: Types.SetDate,
            payload: formatSearchDate(value),
          });
        }}
        value={parsed?.isValid() ? parsed.toDate() : undefined}
      />
      <div className="md:hidden">
        <Button
          size="medium"
          color="black"
          disabled={!state.date.query}
          onClick={() => router.back()}
          fullWidth
        >
          {t("search")}
        </Button>
      </div>
    </section>
  );
};

export default SearchDate;