import { useEffect, useState } from 'react'
import PageTitle from '../../components/PageTitle'
import Filter from '../../components/Filter'
import ProductList from '../../components/ProductList'
import { Box } from '@mui/material'
import SocialMedia from '../../components/SocialMedia'
import Feature from '../../components/Feature'

const Products = () => {

  const [collection, setCollection] = useState(null)

  useEffect(() => {

    // if user come from select collection
    if (sessionStorage.getItem('amber-select-product-type')) {

      if (sessionStorage.getItem('amber-select-collection')) {
        let selectCollection = JSON.parse(sessionStorage.getItem('amber-select-collection'))
        setCollection(selectCollection)
      }

    }else{
      window.location.href = "/"
    }
  }, [])

  return (
    <>
      <Box sx={{
        mt: 10,
        px: {
          xs: 2,
          md: 5,
          lg: 5
        },
        mb: {
          xs: 0,
          md: 5,
          lg: 10
        }
      }}>
        {collection && <PageTitle title={collection?.title} image={collection?.image?.url} />}
        <ProductList />
        <SocialMedia />
        <Box sx={{
          display: {
            xs: "none",
            sm: "none",
            md: "block"
          }
        }}>
          <Feature />
        </Box>
      </Box>
    </>
  )
}

export default Products