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></AppContainer>
    </div>
  )
}
export async function getServerSideProps(context) {
  // const res = await axios.get(AppUrl('GetGalleyImages'));
  return {
    props: {
      dataImage: null
    } // will be passed to the page component as props
  }
}
export default Gallery