import { Box, Button, Grid, Link, Stack, Tab, Tabs, Typography } from '@mui/material';
import axios from 'axios';
import React, { useEffect, useState } from 'react';
import BlankLayout from 'src/@core/layouts/BlankLayout';
import ShopfrontLayout from 'src/@core/layouts/ShopfrontLayout';
import CardMobile from 'src/views/cards/CardMobile';
import CardMobileSamsung from 'src/views/cards/CardMobileSamsung';
import CardMobileVisionPro from 'src/views/cards/CardMobileVisionPro';
// import CardProduct from './product/CardProduct';
import { CartProvider } from 'src/contexts/cart';
import fetchListByCategory from 'src/api/fetchListByCategory';
import fetchListByCategoryUnsold from 'src/api/fetchListByCategoryUnsold';
import fetchCategories from 'src/api/fetchCategories';
import Loading from 'src/components/Loading';
import CardProduct from 'src/components/CardProduct';
import { setup } from 'src/lib/csrf';
import SwapHorizontalCircleIcon from '@mui/icons-material/SwapHorizontalCircle';

function ShopFront() {
  // const [value, setCid] = React.useState(0);

  const [categories, setCategories] = useState([]);
  const [products, setProducts] = useState([]);
  const [tab_pos, setTabPos] = useState(0);
  const [cid, setCid] = useState();

  const handleChange = (event, newValue) => {
    setTabPos(newValue);
    setCid(categories[newValue]['cid']);
  };

  useEffect(() => {
    const update = async () => {
      if (cid == undefined) {
        setProducts([]);
      } else {
        let result = await fetchListByCategoryUnsold({ cid });
        setProducts(result);
      }
    };
    update();
  }, [cid]);

  useEffect(() => {
    const update = async () => {
      let categories = await fetchCategories();
      setCategories(categories);
      if (categories) {
        setCid(categories[0].cid);
      }
    };
    update();
  }, []);

  if (!categories || !products)
    return (
      <>
        <Loading />
      </>
    );
  if (categories == [])
    return (
      <>
        <Loading />
      </>
    );
  if (products == [])
    return (
      <>
        <Loading />
      </>
    );

  return (
    <>
      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
        <Tabs
          value={tab_pos}
          onChange={handleChange}
          aria-label="basic tabs example"
          scrollButtons="auto"
          variant="scrollable"
        >
          {categories?.map((c, i) => (
            <Tab key={i} label={c.name} />
          ))}
        </Tabs>
      </Box>

      <Box my={'2rem'} width={'100%'} minHeight={'80vh'}>
        <Grid container rowSpacing={{ xs: 1, sm: 2, md: 3 }} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
          {products.length < 1 ? (
            <>
              <Grid item xs={12}>
                <Stack justifyContent="center" alignItems={'center'} mt="3rem" height={'50vh'}>
                  <SwapHorizontalCircleIcon />

                  <Typography variant="h6">loading items ...</Typography>
                </Stack>
              </Grid>
            </>
          ) : (
            <>
              {products.map((p, idx) => {
                return (
                  <>
                    <Grid item xs={4}>
                      <CardProduct product={p} i={idx} />
                    </Grid>
                  </>
                );
              })}
            </>
          )}
        </Grid>
      </Box>
    </>
  );
}

ShopFront.getLayout = page => <ShopfrontLayout>{page}</ShopfrontLayout>;

export const getServerSideProps = setup(async ({ req, res }) => {
  return { props: {} };
});

export default ShopFront;
