import React, { useEffect, useState } from 'react'
import FrontLayout from '../../Layouts/FrontLayout';
import ImageGallery from 'react-image-gallery';
import "react-image-gallery/styles/css/image-gallery.css";
import { Card, Container, Grid, Spacer } from '@nextui-org/react';
import TabButtons from './TabButtons';
import Tabs from './Tabs';
import TabContent from './TabContent';
import ProductData from './ProductData';

const ProductDetails = ({colors, sizes, ProductDetails, collection, reviews, reviewAvg}) => {
    const [tab, setTab] = useState('description');

    let images = [];
    useEffect(()=>{
        ProductDetails.photo.split(',').map((item)=>{
            images.push({
                original: item,
                thumbnail: item
            })
        })
    })

    
  return (
    <>
    <Container>
        <Spacer y={2} />
        <Card css={{ border: '1px solid #e5e7eb' }}>
            <Card.Body>
                <Grid.Container gap={2}>
                    <Grid lg={6} md={6} sm={12} xs={12}>
                        <ImageGallery items={images} showPlayButton={false} showIndex={true} onErrorImageURL={""} lazyLoad={true} />
                    </Grid>
                    <Grid lg={6} md={6} sm={12} xs={12} css={{ flexDirection: 'column', pl: '2rem' }} >
                        <ProductData ProductDetails={ProductDetails} collection={collection} colors={colors} sizes={sizes} />
                    </Grid>
                </Grid.Container>
            </Card.Body>
        </Card>

        <Tabs>
            <TabButtons title='Description' active={tab} tab='description' onclick={()=>setTab('description')} />
            <TabButtons title='Reviews' active={tab} tab='review' onclick={()=>setTab('review')} />
            <TabButtons title='Video' active={tab} tab='video' onclick={()=>setTab('video')} />
            <TabContent tab={tab} ProductDetails={ProductDetails} reviewAvg={reviewAvg} reviews={reviews} />
        </Tabs>

    </Container>
    </>
  )
}

ProductDetails.layout = page => <FrontLayout children={page}  title="Product Details" />

export default ProductDetails