Untitled

import * as React from 'react';
import { BrandsApi } from '@/apis/brandService';
import { Divider, InputAdornment, OutlinedInput } from '@mui/material';
import Box from '@mui/material/Box';
import Card from '@mui/material/Card';
import Link from '@mui/material/Link';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import Grid from '@mui/material/Unstable_Grid2';
import { MagnifyingGlass as MagnifyingGlassIcon } from '@phosphor-icons/react/dist/ssr/MagnifyingGlass';
import { Helmet } from 'react-helmet-async';
import { toast } from 'sonner';

import { BrandsListResponse, BrandType } from '@/types/brand';
import type { Metadata } from '@/types/metadata';
import { config } from '@/config';
import { BrandsPagination } from '@/components/dashboard/watch/brands-pagination';

const metadata = { title: `List | Brands | Dashboard | ${config.site.name}` } satisfies Metadata;

export function Page(): React.JSX.Element {
  const [keyword, setKeyword] = React.useState<string>('');
  const [debouncedKeyword, setDebouncedKeyword] = React.useState<string>(keyword);
  const [brands, setBrands] = React.useState<BrandsListResponse | null>(null);
  const token = localStorage.getItem('token');

  React.useEffect(() => {
    const timeout = setTimeout(() => {
      setDebouncedKeyword(keyword);
    }, 500);

    return () => {
      clearTimeout(timeout);
    };
  }, [keyword]);

  React.useEffect(() => {
    if (token) {
      BrandsApi(token, debouncedKeyword, handleBrandSearchSuccess, handleBrandSearchError);
    }
  }, [token, debouncedKeyword]);

  const handleBrandSearchSuccess = (response: BrandsListResponse) => {
    setBrands(response);
  };
  const handleBrandSearchError = (msg: string) => {
    toast(msg);
  };

  const handleChangePage = (page: number, perPage: number) => {
    if (token) {
      BrandsApi(token, keyword, handleBrandSearchSuccess, handleBrandSearchError, page, perPage);
    }
  };

  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setKeyword(event.target.value);
  };

  return (
    <React.Fragment>
      <Helmet>
        <title>{metadata.title}</title>
      </Helmet>
      <Box
        sx={{
          maxWidth: 'var(--Content-maxWidth)',
          m: 'var(--Content-margin)',
          p: '16px',
          width: 'var(--Content-width)',
        }}
      >
        <Stack spacing={4}>
          <Stack direction={{ xs: 'column', sm: 'row' }} spacing={3} sx={{ alignItems: 'flex-start' }}>
            <Box sx={{ flex: '1 1 auto' }}>
              <Typography variant="h4">Brands</Typography>
            </Box>
            <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}></Box>
          </Stack>
          <Card>
            <Stack direction="row" spacing={2} sx={{ alignItems: 'center', flexWrap: 'wrap', p: 3 }}>
              <OutlinedInput
                placeholder="Search Brands"
                onChange={handleInputChange}
                startAdornment={
                  <InputAdornment position="start">
                    <MagnifyingGlassIcon fontSize="var(--icon-fontSize-md)" />
                  </InputAdornment>
                }
                sx={{ flex: '1 1 auto' }}
              />
            </Stack>
          </Card>
        </Stack>
      </Box>
      <Stack spacing={1}>
        <Box
          sx={{
            maxWidth: 'var(--Content-maxWidth)',
            m: 'var(--Content-margin)',
            p: '16px',
            width: 'var(--Content-width)',
          }}
        >
          <Grid container sx={{ gap: '24px', justifyContent: 'space-between' }}>
            {brands.map((brand) => (
              <Grid
                key={brand.id}
                xs={12}
                sm={8}
                md={2.2}
                lg={2.2}
                xl={2.2}
                sx={{
                  height: 'auto',
                  aspectRatio: 1,
                  borderRadius: '8px',
                  backgroundColor: '#F9F9F9',
                }}
              >
                <Link href="#">
                  <img width="100%" alt={brand.name} src={brand.logo} />
                </Link>
              </Grid>
            ))}
          </Grid>
          <Divider />
          <BrandsPagination
            count={brands?.total ?? 0}
            page={brands?.current_page ?? 1}
            lastPage={brands?.last_page ?? 1}
            changePage={handleChangePage}
          />
        </Box>
      </Stack>
    </React.Fragment>
  );
}