import React, {useState, useEffect} from 'react'
import axios from 'axios'
import CategoryBtn from '../../ui/btns/categoryBtn/CategoryBtn'
import './categoryContent.scss'
import { Play } from '../../assets/img'
import MoreBtn from '../../ui/btns/moreBtn/MoreBtn'
import { useSelector, useDispatch } from 'react-redux';
import BackBtn from './../../ui/btns/backBtn/BackBtn';
import TglBtns from './../../ui/btns/tglBtns/TglBtns';

export default function CategoryContent() {
  
  const category = useSelector(state => state.category)

  const dispatch = useDispatch();

  const [tempWorks, setTempWorks] = useState([])

  const [works, setWorks] = useState([])

  const [page, setPage] = useState(0)

  const [end, setEnd] = useState(false)

  const [hide, setHide] = useState(false)

  const[mainCont, setMainCont] = useState({})

    useEffect(() => {
        setMainCont(document.getElementById('root').clientWidth)
    }, [] )

  let count = 0

  let groupCount = 0

  useEffect(() => {
    setWorks([...works, ...tempWorks])
  }, [tempWorks])

  useEffect(() => {
    window.scrollTo(0, 0);
    if(category !== ""){
      axios.get('https://api.adconver.com/examples/?category='+ category +'&page='+page)
        .then((res) => {
          if(res.data.length !== 0){
            setTempWorks([...res.data])
            setEnd(false)
          }else{
            setEnd(true)
          }
        })
        .catch((err) => {
          setEnd(true)
        })
    }else{
      setTempWorks([])
      setWorks([])
      setPage(0)
      setEnd(false)
      setHide(false)
    }
  }, [category, page])

  return (
    <>
    {
      category === "" ? 

      <section  id="category" className='choice'>
        <div className="tglRow">
          <TglBtns isSmall={false} type="double" position="works" leftBtnText="Креативы" rightBtnText="Лендинги" secondDisable={false} change={dispatch} />
        </div>
        <div className="row">
          <CategoryBtn text="Nutra" animation="center" />
          <CategoryBtn text="Gambling" animation="center" />
        </div>
        <div className="row">
          <CategoryBtn text="Crypto" animation="center" />
          <CategoryBtn text="Dating" animation="center" />
        </div>
      </section>

      : category === "Landings" ? 

      <section id="category">
        <div className="tglRow">
          <TglBtns isSmall={false} type="double" position="works" leftBtnText="Креативы" rightBtnText="Лендинги" secondDisable={false} change={dispatch} />
        </div>
        <div className="imgsRow" style={{grid: `repeat(${mainCont < 1024 ? 8 : 4 *(end ? page : page+1)}, ${mainCont < 1024 ? 118 : mainCont < 1771 && mainCont > 1023 ? 215 : 400}px) / repeat(${mainCont < 1024 ? 2 : 4}, ${mainCont < 1024 ? 118 : mainCont < 1771 && mainCont > 1023 ? 215 : 400}px)`}}>
          {
            works.map((work, index) => {
              count = index + 1
              if(count%10 === 1 && index !== 0){
                groupCount = groupCount + 1
              }
              if(work.split('.').pop() === "mp4"){
                return(
                <div className='workItem' 
                  style={
                    count%10 === 1 ? {gridColumn: 1, gridRow: mainCont < 1024 ? (8*groupCount) + 1 : (4*groupCount) + 1} : 
                    count%10 === 2 ? {gridColumn: 2, gridRow: mainCont < 1024 ? (8*groupCount) + 1 : (4*groupCount) + 1} :
                    count%10 === 3 ? {gridColumn: mainCont < 1024 ? 1 : `3 / span 1`, gridRow: mainCont < 1024 ? (8*groupCount) + 2 : `${(4*groupCount) + 1} / span 1`, height: mainCont < 1024 ? "118px" : mainCont < 1771 && mainCont > 1023 ? "437px" : "800px", width: mainCont < 1024 ? "118px" : mainCont < 1771 && mainCont > 1023 ? "437px" : "800px"} :
                    count%10 === 4 ? {gridColumn: mainCont < 1024 ? 2 : 1, gridRow: mainCont < 1024 ? (8*groupCount) + 2 : (4*groupCount) + 2} :
                    count%10 === 5 ? {gridColumn: mainCont < 1024 ? `1 / span 1` : 2, gridRow: mainCont > 1023 ? (4*groupCount) + 2 : `${(8*groupCount) + 3} / span 1`, height: mainCont < 1024 ? "240px" : mainCont < 1771 && mainCont > 1023 ? "215px" : "400px", width: mainCont < 1024 ? "240px" : mainCont < 1771 && mainCont > 1023 ? "215px" : "400px"} :
                    count%10 === 6 ? {gridColumn: mainCont < 1024 ? 1 : `1 / span 1`, gridRow: mainCont < 1024 ? (8*groupCount) + 5 : `${(4*groupCount) + 3} / span 1`, height: mainCont < 1024 ? "118px" : mainCont < 1771 && mainCont > 1023 ? "437px" : "800px", width: mainCont < 1024 ? "118px" : mainCont < 1771 && mainCont > 1023 ? "437px" : "800px"} :
                    count%10 === 7 ? {gridColumn: mainCont < 1024 ? 2 : 3, gridRow: mainCont < 1024 ? (8*groupCount) + 5 : (4*groupCount) + 3} :
                    count%10 === 8 ? {gridColumn: mainCont < 1024 ? 1 : 4, gridRow: mainCont < 1024 ? (8*groupCount) + 6 : (4*groupCount) + 3} :
                    count%10 === 9 ? {gridColumn: mainCont < 1024 ? 2 : 3, gridRow: mainCont < 1024 ? (8*groupCount) + 6 : (4*groupCount) + 4} :
                    count%10 === 0 ? {gridColumn: mainCont < 1024 ? `1 / span 1` : 4, gridRow: mainCont > 1023 ? (4*groupCount) + 4 : `${(8*groupCount) + 7} / span 1`, height: mainCont < 1024 ? "240px" : mainCont < 1771 && mainCont > 1023 ? "215px" : "400px", width: mainCont < 1024 ? "240px" : mainCont < 1771 && mainCont > 1023 ? "215px" : "400px"} 
                    : null
                  }
                  >
                    <video src={`https://api.adconver.com/uploads/${work}`} onClick={(e) => {
                        var parEl = e.target
                        var parElTwo = e.target.parentNode
                        parElTwo.querySelector('.playCont').classList.remove("hide")
                        if (hide === false) {
                            parEl.play();
                        } else {
                            parEl.pause();
                        }
                        setHide(!hide)
                      }}>
                  </video>
                    <div className={`playCont`} 
                    onClick={(e) => {
                      var parEl = e.target.parentNode
                      if (hide === false) {
                          parEl.querySelector('video').play();
                          e.target.classList.add("hide")
                      } else {
                          parEl.querySelector('video').pause();
                          e.target.classList.remove("hide")
                      }
                      setHide(!hide)
                    }}>
                      <img src={Play} alt="Play Btn" className="playBtn" onClick={(e) => {
                        var parEl = e.target.parentNode
                        var parElTwo = parEl.parentNode
                        if (hide === false) {
                            parElTwo.querySelector('video').play();
                            parEl.classList.add('hide')
                        } else {
                            parElTwo.querySelector('video').pause();
                            parEl.classList.remove('hide')
                        }
                        setHide(!hide)
                      }} />
                    </div>
                </div>
                  
                )
              }else{
                return(
                  <img src={`https://api.adconver.com/uploads/${work}`} alt="Work Item" className='workItem'
                  style={
                    count%10 === 1 ? {gridColumn: 1, gridRow: mainCont < 1024 ? (8*groupCount) + 1 : (4*groupCount) + 1} : 
                    count%10 === 2 ? {gridColumn: 2, gridRow: mainCont < 1024 ? (8*groupCount) + 1 : (4*groupCount) + 1} :
                    count%10 === 3 ? {gridColumn: mainCont < 1024 ? 1 : `3 / span 1`, gridRow: mainCont < 1024 ? (8*groupCount) + 2 : `${(4*groupCount) + 1} / span 1`, height: mainCont < 1024 ? "118px" : mainCont < 1771 && mainCont > 1023 ? "437px" : "800px", width: mainCont < 1024 ? "118px" : mainCont < 1771 && mainCont > 1023 ? "437px" : "800px"} :
                    count%10 === 4 ? {gridColumn: mainCont < 1024 ? 2 : 1, gridRow: mainCont < 1024 ? (8*groupCount) + 2 : (4*groupCount) + 2} :
                    count%10 === 5 ? {gridColumn: mainCont < 1024 ? `1 / span 1` : 2, gridRow: mainCont > 1023 ? (4*groupCount) + 2 : `${(8*groupCount) + 3} / span 1`, height: mainCont < 1024 ? "240px" : mainCont < 1771 && mainCont > 1023 ? "215px" : "400px", width: mainCont < 1024 ? "240px" : mainCont < 1771 && mainCont > 1023 ? "215px" : "400px"} :
                    count%10 === 6 ? {gridColumn: mainCont < 1024 ? 1 : `1 / span 1`, gridRow: mainCont < 1024 ? (8*groupCount) + 5 : `${(4*groupCount) + 3} / span 1`, height: mainCont < 1024 ? "118px" : mainCont < 1771 && mainCont > 1023 ? "437px" : "800px", width: mainCont < 1024 ? "118px" : mainCont < 1771 && mainCont > 1023 ? "437px" : "800px"} :
                    count%10 === 7 ? {gridColumn: mainCont < 1024 ? 2 : 3, gridRow: mainCont < 1024 ? (8*groupCount) + 5 : (4*groupCount) + 3} :
                    count%10 === 8 ? {gridColumn: mainCont < 1024 ? 1 : 4, gridRow: mainCont < 1024 ? (8*groupCount) + 6 : (4*groupCount) + 3} :
                    count%10 === 9 ? {gridColumn: mainCont < 1024 ? 2 : 3, gridRow: mainCont < 1024 ? (8*groupCount) + 6 : (4*groupCount) + 4} :
                    count%10 === 0 ? {gridColumn: mainCont < 1024 ? `1 / span 1` : 4, gridRow: mainCont > 1023 ? (4*groupCount) + 4 : `${(8*groupCount) + 7} / span 1`, height: mainCont < 1024 ? "240px" : mainCont < 1771 && mainCont > 1023 ? "215px" : "400px", width: mainCont < 1024 ? "240px" : mainCont < 1771 && mainCont > 1023 ? "215px" : "400px"} 
                    : null
                  }
                  />
                )
              }
            })
          }
        </div>
          <div className="btnRow">
            <MoreBtn end={end} setPage={setPage} page={page} />
          </div>
      </section>
      :
      <section id="category">
        <div className="leftRow">
          <BackBtn  type="category" setWorks={setWorks} setPage={setPage} setEnd={setEnd} setHide={setHide} />
        </div>
        <div className="imgsRow" style={{grid: `repeat(${mainCont < 1024 ? 8 : 4 *(end ? page : page+1)}, ${mainCont < 1024 ? 118 : mainCont < 1771 && mainCont > 1023 ? 215 : 400}px) / repeat(${mainCont < 1024 ? 2 : 4}, ${mainCont < 1024 ? 118 : mainCont < 1771 && mainCont > 1023 ? 215 : 400}px)`}}>
          {
            works.map((work, index) => {
              count = index + 1
              if(count%10 === 1 && index !== 0){
                groupCount = groupCount + 1
              }
              if(work.split('.').pop() === "mp4"){
                return(
                <div className='workItem' 
                  style={
                    count%10 === 1 ? {gridColumn: 1, gridRow: mainCont < 1024 ? (8*groupCount) + 1 : (4*groupCount) + 1} : 
                    count%10 === 2 ? {gridColumn: 2, gridRow: mainCont < 1024 ? (8*groupCount) + 1 : (4*groupCount) + 1} :
                    count%10 === 3 ? {gridColumn: mainCont < 1024 ? 1 : `3 / span 1`, gridRow: mainCont < 1024 ? (8*groupCount) + 2 : `${(4*groupCount) + 1} / span 1`, height: mainCont < 1024 ? "118px" : mainCont < 1771 && mainCont > 1023 ? "437px" : "800px", width: mainCont < 1024 ? "118px" : mainCont < 1771 && mainCont > 1023 ? "437px" : "800px"} :
                    count%10 === 4 ? {gridColumn: mainCont < 1024 ? 2 : 1, gridRow: mainCont < 1024 ? (8*groupCount) + 2 : (4*groupCount) + 2} :
                    count%10 === 5 ? {gridColumn: mainCont < 1024 ? `1 / span 1` : 2, gridRow: mainCont > 1023 ? (4*groupCount) + 2 : `${(8*groupCount) + 3} / span 1`, height: mainCont < 1024 ? "240px" : mainCont < 1771 && mainCont > 1023 ? "215px" : "400px", width: mainCont < 1024 ? "240px" : mainCont < 1771 && mainCont > 1023 ? "215px" : "400px"} :
                    count%10 === 6 ? {gridColumn: mainCont < 1024 ? 1 : `1 / span 1`, gridRow: mainCont < 1024 ? (8*groupCount) + 5 : `${(4*groupCount) + 3} / span 1`, height: mainCont < 1024 ? "118px" : mainCont < 1771 && mainCont > 1023 ? "437px" : "800px", width: mainCont < 1024 ? "118px" : mainCont < 1771 && mainCont > 1023 ? "437px" : "800px"} :
                    count%10 === 7 ? {gridColumn: mainCont < 1024 ? 2 : 3, gridRow: mainCont < 1024 ? (8*groupCount) + 5 : (4*groupCount) + 3} :
                    count%10 === 8 ? {gridColumn: mainCont < 1024 ? 1 : 4, gridRow: mainCont < 1024 ? (8*groupCount) + 6 : (4*groupCount) + 3} :
                    count%10 === 9 ? {gridColumn: mainCont < 1024 ? 2 : 3, gridRow: mainCont < 1024 ? (8*groupCount) + 6 : (4*groupCount) + 4} :
                    count%10 === 0 ? {gridColumn: mainCont < 1024 ? `1 / span 1` : 4, gridRow: mainCont > 1023 ? (4*groupCount) + 4 : `${(8*groupCount) + 7} / span 1`, height: mainCont < 1024 ? "240px" : mainCont < 1771 && mainCont > 1023 ? "215px" : "400px", width: mainCont < 1024 ? "240px" : mainCont < 1771 && mainCont > 1023 ? "215px" : "400px"} 
                    : null
                  }
                  >
                    <video src={`https://api.adconver.com/uploads/${work}`} onClick={(e) => {
                        var parEl = e.target
                        var parElTwo = e.target.parentNode
                        parElTwo.querySelector('.playCont').classList.remove("hide")
                        if (hide === false) {
                            parEl.play();
                        } else {
                            parEl.pause();
                        }
                        setHide(!hide)
                      }}>
                  </video>
                    <div className={`playCont`} 
                    onClick={(e) => {
                      var parEl = e.target.parentNode
                      if (hide === false) {
                          parEl.querySelector('video').play();
                          e.target.classList.add("hide")
                      } else {
                          parEl.querySelector('video').pause();
                          e.target.classList.remove("hide")
                      }
                      setHide(!hide)
                    }}>
                      <img src={Play} alt="Play Btn" className="playBtn" onClick={(e) => {
                        var parEl = e.target.parentNode
                        var parElTwo = parEl.parentNode
                        if (hide === false) {
                            parElTwo.querySelector('video').play();
                            parEl.classList.add('hide')
                        } else {
                            parElTwo.querySelector('video').pause();
                            parEl.classList.remove('hide')
                        }
                        setHide(!hide)
                      }} />
                    </div>
                </div>
                  
                )
              }else{
                return(
                  <img src={`https://api.adconver.com/uploads/${work}`} alt="Work Item" className='workItem'
                  style={
                    count%10 === 1 ? {gridColumn: 1, gridRow: mainCont < 1024 ? (8*groupCount) + 1 : (4*groupCount) + 1} : 
                    count%10 === 2 ? {gridColumn: 2, gridRow: mainCont < 1024 ? (8*groupCount) + 1 : (4*groupCount) + 1} :
                    count%10 === 3 ? {gridColumn: mainCont < 1024 ? 1 : `3 / span 1`, gridRow: mainCont < 1024 ? (8*groupCount) + 2 : `${(4*groupCount) + 1} / span 1`, height: mainCont < 1024 ? "118px" : mainCont < 1771 && mainCont > 1023 ? "437px" : "800px", width: mainCont < 1024 ? "118px" : mainCont < 1771 && mainCont > 1023 ? "437px" : "800px"} :
                    count%10 === 4 ? {gridColumn: mainCont < 1024 ? 2 : 1, gridRow: mainCont < 1024 ? (8*groupCount) + 2 : (4*groupCount) + 2} :
                    count%10 === 5 ? {gridColumn: mainCont < 1024 ? `1 / span 1` : 2, gridRow: mainCont > 1023 ? (4*groupCount) + 2 : `${(8*groupCount) + 3} / span 1`, height: mainCont < 1024 ? "240px" : mainCont < 1771 && mainCont > 1023 ? "215px" : "400px", width: mainCont < 1024 ? "240px" : mainCont < 1771 && mainCont > 1023 ? "215px" : "400px"} :
                    count%10 === 6 ? {gridColumn: mainCont < 1024 ? 1 : `1 / span 1`, gridRow: mainCont < 1024 ? (8*groupCount) + 5 : `${(4*groupCount) + 3} / span 1`, height: mainCont < 1024 ? "118px" : mainCont < 1771 && mainCont > 1023 ? "437px" : "800px", width: mainCont < 1024 ? "118px" : mainCont < 1771 && mainCont > 1023 ? "437px" : "800px"} :
                    count%10 === 7 ? {gridColumn: mainCont < 1024 ? 2 : 3, gridRow: mainCont < 1024 ? (8*groupCount) + 5 : (4*groupCount) + 3} :
                    count%10 === 8 ? {gridColumn: mainCont < 1024 ? 1 : 4, gridRow: mainCont < 1024 ? (8*groupCount) + 6 : (4*groupCount) + 3} :
                    count%10 === 9 ? {gridColumn: mainCont < 1024 ? 2 : 3, gridRow: mainCont < 1024 ? (8*groupCount) + 6 : (4*groupCount) + 4} :
                    count%10 === 0 ? {gridColumn: mainCont < 1024 ? `1 / span 1` : 4, gridRow: mainCont > 1023 ? (4*groupCount) + 4 : `${(8*groupCount) + 7} / span 1`, height: mainCont < 1024 ? "240px" : mainCont < 1771 && mainCont > 1023 ? "215px" : "400px", width: mainCont < 1024 ? "240px" : mainCont < 1771 && mainCont > 1023 ? "215px" : "400px"} 
                    : null
                  }
                  />
                )
              }
            })
          }
        </div>
          <div className="btnRow">
            <MoreBtn end={end} setPage={setPage} page={page} />
          </div>
      </section>
    }
    </>
  )
}