"use client"

import * as React from 'react';
import Card from '@mui/material/Card';
import InputAdornment from '@mui/material/InputAdornment';
import OutlinedInput from '@mui/material/OutlinedInput';
import { MagnifyingGlass as MagnifyingGlassIcon } from '@phosphor-icons/react/dist/ssr/MagnifyingGlass';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import Box from '@mui/material/Box';

interface MerchandiseFiltersProps {
  value: number;
  onChange: (event: React.SyntheticEvent, newValue: number) => void;
  onSearchChange: (query: string) => void;
  onCategorySearch: (query: string) => void;
}

function a11yProps(index: number) {
  return {
    id: `simple-tab-${index}`,
    'aria-controls': `simple-tabpanel-${index}`,
  };
}

export function MerchandiseFilters({ value, onChange, onSearchChange, onCategorySearch }: MerchandiseFiltersProps): React.JSX.Element {
  const [searchCategoryText, setSearchCategoryText] = React.useState('');
  const [searchText, setSearchText] = React.useState('');

  React.useEffect(() => {
    if (value !== 0) return;

    const delayDebounceFn = setTimeout(() => {
      onCategorySearch(searchCategoryText);
    }, 300);

    return () => clearTimeout(delayDebounceFn);
  }, [searchCategoryText, onCategorySearch, value]);

  React.useEffect(() => {
    if (value !== 1) return;

    const delayDebounceFn = setTimeout(() => {
      onSearchChange(searchText);
    }, 300);

    return () => clearTimeout(delayDebounceFn);
  }, [searchText, onSearchChange, value]);

  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setSearchText(event.target.value);
  };

  const handleCategorySearchChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setSearchCategoryText(event.target.value);
  };

  const searchValue = value === 0 ? searchCategoryText : searchText;

  return (
    <Card sx={{ p: 2, pr: 10 }}>
      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
        <OutlinedInput
          key={value}
          value={searchValue}
          onChange={(event) => {
            if (value === 0) {
              handleCategorySearchChange(event);
            } else {
              handleSearchChange(event);
            }
          }}
          fullWidth
          placeholder={value === 0 ? 'Search categories...' : 'Search products...'}
          startAdornment={
            <InputAdornment position="start">
              <MagnifyingGlassIcon fontSize="var(--icon-fontSize-md)" />
            </InputAdornment>
          }
          sx={{
            maxWidth: '500px',
            borderRadius: '35px',
            height: '45px',
            '& .MuiOutlinedInput-notchedOutline': {
              borderColor: 'none',
            },
            '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
              borderColor: 'black',
            },
          }}
        />

        <Box sx={{ ml: 2 }}>
          <Tabs
            value={value}
            onChange={onChange}
            sx={{
              border: '1px solid #b3b9c6',
              borderRadius: '25px',
              width: '100%',
              '& .MuiTabs-indicator': {
                backgroundColor: 'transparent',
              },
            }}
            aria-label="merchandise tabs"
          >
            <Tab
              label="Categories"
              {...a11yProps(0)}
              sx={{
                bgcolor: value === 0 ? '#000000' : 'transparent',
                borderRadius: '25px',
                px: '10px',
                minWidth: '30%',
                marginLeft: '0px',
                '&.Mui-selected': {
                  marginLeft: '0px',
                  color: '#FFDD31',
                },
              }}
            />
            <Tab
              label="Products"
              {...a11yProps(1)}
              sx={{
                bgcolor: value === 1 ? '#000000' : 'transparent',
                borderRadius: '25px',
                px: '10px',
                minWidth: '30%',
                marginLeft: '0px',
                '&.Mui-selected': {
                  marginLeft: '0px',
                  color: '#FFDD31',
                },
              }}
            />
          </Tabs>
        </Box>
      </Box>
    </Card>
  );
}