/* eslint-disable @next/next/no-img-element */ import React, { useContext, useState } from "react"; import cls from "./productFilter.module.scss"; import { useTranslation } from "react-i18next"; import { useQuery } from "react-query"; import { useRouter } from "next/router"; import brandService from "services/brand"; import { Skeleton } from "@mui/material"; import { IBrand } from "interfaces"; import RadioInput from "components/inputs/radioInput"; import SecondaryButton from "components/button/secondaryButton"; import DarkButton from "components/button/darkButton"; type Props = { open: boolean; handleClose: () => void; }; interface Option { title: string; value: string; } const sortOptions: Option[] = [ { title: "standard", value: "standard" }, { title: "least.expensive", value: "price_asc", }, { title: "expensive", value: "price_desc", }, ]; export default function ProductFilter({ open, handleClose }: Props) { const { t } = useTranslation(); const { query, replace } = useRouter(); const [selectedSortOption, setSelectedSortOption] = useState( (query?.sort as string) || sortOptions[0].value ); const [selectedBrands, setSelectedBrands] = useState( Array.isArray(query?.brands) ? query?.brands : query?.brands ? [query?.brands as string] : [] ); const { data: brands, isLoading: brandsLoading } = useQuery( ["brands", query?.category_id, query?.id], () => brandService.getAll({ category_id: query?.category_id, perPage: 100, shop_id: query?.id, }), { enabled: open, } ); const handlSelectBrand = (brand: IBrand) => { if (selectedBrands.includes(brand.id.toString())) { setSelectedBrands( (oldBrands) => oldBrands?.filter((oldBrand) => oldBrand !== brand.id.toString()) || [] ); } else { setSelectedBrands((oldBrands) => [...oldBrands, brand.id.toString()]); } }; const handleReset = () => { setSelectedSortOption(sortOptions[0].value); setSelectedBrands([]); }; const handleShowResut = () => { const params: Record = { id: query?.id, }; if (query?.category_id) { params.category_id = query?.category_id; } if (query?.sub_category_id) { params.sub_category_id = query?.category_id; } if (selectedBrands.length > 0) { params.brands = selectedBrands; } if (selectedSortOption !== "standard") { params.sort = selectedSortOption; } replace({ query: params }, undefined, { shallow: true}); handleClose(); }; const handleSortChange = (item: Option) => { setSelectedSortOption(item.value); }; const controlProps = (item: Option) => ({ checked: selectedSortOption == item.value, onChange: () => handleSortChange(item), value: item.value, id: item.value, name: "sort", inputProps: { "aria-label": item.value }, }); return (

{t("show.first")}

{sortOptions.map((item) => (
))}
{!brandsLoading && brands?.data.length !== 0 && ( <>

{t("brands")}

{brandsLoading ? Array.from(Array(6).keys()).map((item) => ( )) : brands?.data.map((brand) => ( ))}
)}
{t("show")} {selectedBrands.length > 0 && ( {t("clear")} )}
); }