import React, { useEffect, useState } from 'react';
import axios from "axios";
import AppContainer from "./appContainer";
import { AppFile, AppUrl } from "../lib/api";
import Image from "next/image";
import dynamic from "next/dynamic";
import { Suspense } from 'react'

import {
    MDBBtn,
    MDBCol,
    MDBContainer,
    MDBRow,
} from "mdb-react-ui-kit";
import { LightBox } from "react-lightbox-pack";
import { Button, Divider, Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";

const APV = dynamic(() => import('./components/Videos'), {
    ssr: false,
})
const shimmer = (w, h) => `
<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="g">
      <stop stop-color="#333" offset="20%" />
      <stop stop-color="#222" offset="50%" />
      <stop stop-color="#333" offset="70%" />
    </linearGradient>
  </defs>
  <rect width="${w}" height="${h}" fill="#333" />
  <rect id="r" width="${w}" height="${h}" fill="url(#g)" />
  <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
</svg>`

const toBase64 = (str) =>
    typeof window === 'undefined'
        ? Buffer.from(str).toString('base64')
        : window.btoa(str)

const Gallery = (dataImage) => {
    const [Images, SetImages] = useState(dataImage)
    const [justifyActive, setJustifyActive] = React.useState('tab1');
    const [toggle, setToggle] = React.useState(false);
    const [sIndex, setSIndex] = React.useState(0);
    const [filterId, setFilterId] = React.useState(1);
    const Parallax = ({ quality }) => {
        return `../resource/parallax/Gallery.jpg`;
    }
    const Filter = async (filter) => {
        const res = await axios.get(AppUrl(`FilterGalleyImages/${filter}`));
        SetImages({ dataImage: res.data })
        setFilterId(filter)
    }

    const AllImage = async () => {
        const res = await axios.get(AppUrl(`GetGalleyImages`));
        SetImages({ dataImage: res.data })
    }

    // Handler
    const lightBoxHandler = (state, sIndex) => {
        setToggle(state);
        setSIndex(sIndex);
    };

    const handleJustifyClick = (value) => {
        if (value === justifyActive) {
            return;
        }

        setJustifyActive(value);
    };
    return (
        <div>
            <style jsx>
                {`
                  .cardImage {
                    background-color: #F3F4F6;
                    padding: 5px;
                    border-radius: 1rem;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    margin: 2px;
                  }
                `}
            </style>
            <AppContainer>
                <div className="parallax-container">
                    <h1 className={'center-align text-white header_back service-text dana font-weight-bold'}> گالری بیمارستان  </h1>
                    <Image
                        loader={Parallax}
                        src="Parallax.png"
                        className={'responsive-img shadow-5'}
                        placeholder="blur"
                        blurDataURL={`data:image/svg+xml;base64,${toBase64(shimmer(3000, 1300))}`}
                        alt="درباره بیارستان مهر ایرانیان پرند "
                        width={3000}
                        height={1300}
                    />
                </div>
                <div className='lg:mx-20 sm:mx-5'>
                    <Tabs defaultIndex={1} className={'mt-5'} isFitted variant='enclosed'>
                        <TabList mb='1em'>
                            {/* <Tab on className={'bk font-weight-bold'} _selected={{ color: 'white', bg: 'teal.500' }}>ویدئو ها</Tab> */}
                            <Tab className={'bk font-weight-bold'} _selected={{ color: 'white', bg: 'teal.500' }}>تصاویر</Tab>
                        </TabList>

                    </Tabs>
                    <div style={{ flexDirection: 'column' }} className={'flex justify-content-end flex-xl-row flex-lg-row flex-md-column flex-sm-column'}>
                        <MDBBtn onClick={() => Filter(2)} color={filterId === 2 ? 'light' : 'light'} className={filterId === 2 ? 'm-2' : 'm-2 text-dark'}>تصاویر در حال ساخت</MDBBtn>
                        <MDBBtn onClick={() => Filter(1)} color={filterId === 1 ? 'light' : 'light'} className={'m-2'}>تصاویر معماری</MDBBtn>
                        <MDBBtn onClick={() => AllImage()} color={filterId !== 1 && 2 ? 'light' : 'light'} className={'m-2'}>همه تصاویر </MDBBtn>
                    </div>
                    <Divider colorScheme={'gray'} />
                    <MDBRow style={{ marginTop: 10 }}>
                        {Images && Images.dataImage.map((image, index) => {
                            return (
                                <MDBCol xs={12} sm={12} md={6} lg={3}>
                                    <div className={'cardImage'} key={image.id}>
                                        <img
                                            key={image.id}
                                            alt={image.title}
                                            width={350}
                                            style={{ cursor: 'zoom-in' }}
                                            className={'responsive-img'}
                                            src={AppFile(`panel-public/uploads/HospitalGallery/${image.imageAddr}`)}
                                            onClick={() => {
                                                lightBoxHandler(true, index);
                                            }}
                                        />
                                        <br />
                                        <span>{image.title}</span>
                                    </div>
                                </MDBCol>
                            )
                        })}
                    </MDBRow>
                    <LightBox
                        state={toggle}
                        event={lightBoxHandler}
                        data={Images.dataImage}
                        imageWidth="60vw"
                        imageHeight="70vh"
                        thumbnailHeight={50}
                        thumbnailWidth={50}
                        setImageIndex={setSIndex}
                        imageIndex={sIndex}
                    />
                    <br />
                    <br />
                    <br />
                    <br />
                </div>
            </AppContainer>

        </div>
    );
};
export async function getServerSideProps(context) {
    const res = await axios.get(AppUrl('GetGalleyImages'));
    return {
        props: {
            dataImage: res.data
        }, // will be passed to the page component as props
    }
}
export default Gallery;