'use client';

import React, { useMemo } from 'react';
import { usePathname, useSearchParams } from 'next/navigation';
import clsx from 'clsx';

import { Button, Icon, Select, Link } from '@theme/components';
import { SortOption } from '@akinon/next/types';

import { useRouter, useLocalization } from '@akinon/next/hooks';

interface Props {
  totalCount: number;
  setMenuStatus: () => void;
  sortOptions: SortOption[];
}

export const CategoryHeader = (props: Props) => {
  const { t } = useLocalization();
  const PAGE_SIZE = [
    { label: t('category.filters.48_products'), value: 48 },
    { label: t('category.filters.96_products'), value: 96 }
  ];

  const LAYOUTS = [
    { icon: 'layout-2', value: 2 },
    { icon: 'layout-3', value: 3 }
  ];
  const { totalCount, setMenuStatus, sortOptions } = props;
  const router = useRouter();

  const searchParams = useSearchParams();
  const pathname = usePathname();

  const pageSize = useMemo(
    () => searchParams.get('page_size') ?? 48,
    [searchParams]
  );
  const layoutSize = useMemo(
    () => searchParams.get('layout') ?? 3,
    [searchParams]
  );

  const handleSelectFilter = ({
    key,
    value
  }: {
    key: string;
    value: string;
  }) => {
    const urlSearchParams = new URLSearchParams(searchParams.toString());

    urlSearchParams.set(key, value);

    router.push(pathname + '?' + urlSearchParams.toString());
  };

  return (
    <div className="flex flex-col gap-4 mb-4 text-gray-950 text-sm">
      <div className="flex items-center">
        <span className="hidden lg:block">
          <span data-testid="list-count">{totalCount}</span>{' '}
          {t('category.header.results')}
        </span>

        <div className="hidden lg:flex gap-5 ml-auto mr-7 px-5 py-2 border border-gray-100">
          <span> {t('category.header.view')}</span>
          {PAGE_SIZE.map(({ label, value }) => (
            <a
              key={value}
              onClick={() => {
                handleSelectFilter({
                  key: 'page_size',
                  value: String(value)
                });
              }}
              className={clsx('cursor-pointer', {
                'text-black font-semibold': Number(pageSize) === value
              })}
            >
              {label}
            </a>
          ))}
          <div className="flex items-center gap-2 pl-5 border-l border-gray-400">
            {LAYOUTS.map(({ icon, value }) => (
              <a
                key={value}
                onClick={() => {
                  handleSelectFilter({
                    key: 'layout',
                    value: String(value)
                  });
                }}
                className="cursor-pointer"
              >
                <Icon
                  key={value}
                  name={icon}
                  size={16}
                  className={
                    Number(layoutSize) === value
                      ? 'text-black'
                      : 'text-gray-500'
                  }
                />
              </a>
            ))}
          </div>
        </div>
        <Button
          className="relative border-gray-100 text-left mr-5 bg-white text-primary-100 w-40 lg:hidden lg:mr-0"
          onClick={() => setMenuStatus()}
          data-testid="list-filter"
        >
          {t('category.filters.title')}
          <Icon
            name="chevron-down"
            size={10}
            className="absolute right-1 top-1/2 transform -translate-y-1/2"
          />
        </Button>
        <Select
          options={sortOptions}
          value={sortOptions?.find(({ is_selected }) => is_selected)?.value}
          data-testid="list-sorter"
          onChange={(e) => {
            handleSelectFilter({
              key: 'sorter',
              value: e.currentTarget.value
            });
          }}
          borderless={false}
        />
      </div>
      {totalCount === 0 && (
        <div className="h-40 flex items-center justify-center  flex-col bg-gray-200 p-4">
          <div className="text-center">
            <span className="text-lg">{t('category.search.not_found')}</span>
          </div>
          <div className="mt-3 text-center">
            <Link href="/" className="underline text-lg">
              {t('category.search.link')}
            </Link>
          </div>
        </div>
      )}
    </div>
  );
};