import axios from "axios";
import cx from "classnames";
import { Button, Image, Modal, Skeleton } from "antd";
import { useRouter } from "next/router";
import styles from "./homePage.module.scss";
import { FC, useContext, useEffect, useState } from "react";
import { baseUrl } from "../../../constants/urls";
import shopConetxt from "../../../context/shopConetxt";
import { isNull } from "util";
import { capitalizeWords } from "../../../constants/commonFunction";

const HomePage: FC<any> = () => {
  const router = useRouter();
  const { isProductListLoading, setIsProductListLoading } =
    useContext(shopConetxt);
  const [playVideo, setPlayVideo] = useState(false);
  const [isOpen, setIsOpen] = useState(false);
  const [galleryImages, setGalleryImages] = useState<any>([]);
  const [sortedGalleryImages, setSortedGalleryImages] = useState<any>({});

  const handlePlayVideo = () => {
    setPlayVideo(true);
  };

  const handleClose = () => {
    setIsOpen((state) => !state);
  };

  const getVendorImages = () => {
    axios
      .get(
        `${baseUrl}/api/seller-gallery-images-by-code/${router.query.id}/seller-page`
      )
      .then((response) => {
        setGalleryImages(response.data.data);
        setTimeout(() => {
          setIsProductListLoading(false);
        }, 1000); 
      })
      .catch((error) => {
        setIsProductListLoading(false);
      });
  };

  const getGalleryImage = (sort: number) =>
    galleryImages.find((image: any) => image.sort == sort);

  useEffect(() => {
    setIsProductListLoading(true);
    if(router?.query?.id){
    getVendorImages();
    }
    
  }, []);

  useEffect(() => {
    setSortedGalleryImages({
      one: getGalleryImage(1),
      two: getGalleryImage(2),
      three: getGalleryImage(3),
      four: getGalleryImage(4),
      five: getGalleryImage(5),
      six: getGalleryImage(6),
      seven:getGalleryImage(7),
      eight:getGalleryImage(8),
      nine:getGalleryImage(9),

    });
  }, [galleryImages]);

  return (
    <>
      <div className={cx(styles.homePageContainer)}>
        {isProductListLoading ? (
          <Skeleton active />
        ) : (
          <div>
            <div className="ant-row">
              <div className={cx("ant-col ant-col-xs-24 ant-col-md-24 ant-col-xl-12   mb-10",styles.marginHeight)}>
                {sortedGalleryImages.one ?
                <>
                    <img
                      src={sortedGalleryImages.one.image}
                      // style={{width:"650px" ,maxWidth:"650px" }}
                      className={styles.newImg}
                      onClick={() => {
                        window.open(sortedGalleryImages.one.url,"_blank");
                      }}
                    />
                    <div className={cx("flex",styles.buttonHeight)} style={{ background: sortedGalleryImages.one.textarea_bg_color}}>
                        <div className={styles.title1}>
                        {capitalizeWords(sortedGalleryImages.one.title)}
                        </div>
                        <div>
                        <a
                              className={cx("ant-btn ant-btn-primary",styles.ExplorebuttonHeight)}
                              target="_blank"
                              href={sortedGalleryImages.one.url}
                              style={{
                                color:
                                  sortedGalleryImages.one.button_text_color,
                                background:
                                  sortedGalleryImages.one.button_bg_color,
                                borderColor:
                                  sortedGalleryImages.one.button_bg_color,
                              }} rel="noreferrer"
                            >
                              {sortedGalleryImages.one.button_title}
                            </a>
                        </div>
                    </div>
                 </>
                 : 
                  null
                }
              </div>
              <div
                className={cx("ant-col ant-col-xs-24 ant-col-md-24 ant-col-xl-12  mb-10",styles.marginHeight)}
              >
                {sortedGalleryImages.two ? (
                    <>
                      <img
                        src={sortedGalleryImages.two.image}
                        className={styles.newImg}
                        onClick={() => {
                          window.open(sortedGalleryImages.two.url,"_blank");
                        }}
                      />
                      <div className={cx("flex",styles.buttonHeight)} style={{ background: sortedGalleryImages.two.textarea_bg_color}}>
                        <div className={styles.title1}>
                        {capitalizeWords(sortedGalleryImages.two.title)}
                        </div>
                        <div>
                        <a
                               className={cx("ant-btn ant-btn-primary",styles.ExplorebuttonHeight)}
                              target="_blank"
                              href={sortedGalleryImages.two.url}
                              style={{
                                color:
                                  sortedGalleryImages.two.button_text_color,
                                background:
                                  sortedGalleryImages.two.button_bg_color,
                                borderColor:
                                  sortedGalleryImages.two.button_bg_color,
                              }} rel="noreferrer"
                            >
                              {sortedGalleryImages.two.button_title}
                            </a>
                        </div>
                    </div>
                      </>
                    ) : (
                     null
                    )}
                
              </div>
              <div className={cx("ant-col ant-col-xs-24 ant-col-md-24 ant-col-xl-12   mb-10",styles.marginHeight)}>
                {sortedGalleryImages.three ? (
                  <>
                    <img
                      src={sortedGalleryImages.three.image}
                      className={styles.newImg}
                      onClick={() => {
                        window.open(sortedGalleryImages.three.url,"_blank");
                      }}
                    />
                    <div className={cx("flex",styles.buttonHeight)} style={{ background: sortedGalleryImages.three.textarea_bg_color}}>
                        <div className={styles.title1}>
                        {capitalizeWords(sortedGalleryImages.three.title)}
                        </div>
                        <div>
                        <a
                               className={cx("ant-btn ant-btn-primary",styles.ExplorebuttonHeight)}
                              target="_blank"
                              href={sortedGalleryImages.three.url}
                              style={{
                                color:
                                  sortedGalleryImages.three.button_text_color,
                                background:
                                  sortedGalleryImages.three.button_bg_color,
                                borderColor:
                                  sortedGalleryImages.three.button_bg_color,
                              }} rel="noreferrer"
                            >
                              {sortedGalleryImages.three.button_title}
                            </a>
                        </div>
                    </div>
                    </>
                  
                ) : (
                  null
                )}
              </div>
              
              <div className={cx("ant-col ant-col-xs-24 ant-col-md-24 ant-col-xl-12   mb-10",styles.marginHeight)}>
                {sortedGalleryImages.four ? (
                  <>
                    <img
                      src={sortedGalleryImages.four.image}
                      className={styles.newImg}
                      onClick={() => {
                        window.open(sortedGalleryImages.four.url,"_blank");
                      }}
                    />
                    <div className={cx("flex",styles.buttonHeight)} style={{ background: sortedGalleryImages.four.textarea_bg_color}}>
                        <div className={styles.title1}>
                        {capitalizeWords(sortedGalleryImages.four.title)}
                        </div>
                        <div>
                        <a
                               className={cx("ant-btn ant-btn-primary",styles.ExplorebuttonHeight)}
                              target="_blank"
                              href={sortedGalleryImages.four.url}
                              style={{
                                color:
                                  sortedGalleryImages.four.button_text_color,
                                background:
                                  sortedGalleryImages.four.button_bg_color,
                                borderColor:
                                  sortedGalleryImages.four.button_bg_color,
                              }} rel="noreferrer"
                            >
                              {sortedGalleryImages.four.button_title}
                            </a>
                        </div>
                    </div>
                    </>
                    
                  
                ) : (
                  null
                )}
              </div>
              <div className={cx("ant-col ant-col-xs-24 ant-col-md-24 ant-col-xl-12   mb-10",styles.marginHeight)}>
                {sortedGalleryImages.five ? (
                  <>
                    <img
                      src={sortedGalleryImages.five.image}
                      className={styles.newImg}
                      onClick={() => {
                        window.open(sortedGalleryImages.five.url,"_blank");
                      }}
                    />
                    <div className={cx("flex",styles.buttonHeight)} style={{ background: sortedGalleryImages.five.textarea_bg_color}}>
                        <div className={styles.title1}>
                        {capitalizeWords(sortedGalleryImages.five.title)}
                        </div>
                        <div>
                        <a
                               className={cx("ant-btn ant-btn-primary",styles.ExplorebuttonHeight)}
                              target="_blank"
                              href={sortedGalleryImages.five.url}
                              style={{
                                color:
                                  sortedGalleryImages.five.button_text_color,
                                background:
                                  sortedGalleryImages.five.button_bg_color,
                                borderColor:
                                  sortedGalleryImages.five.button_bg_color,
                              }} rel="noreferrer"
                            >
                              {sortedGalleryImages.five.button_title}
                            </a>
                        </div>
                    </div>
                    </>
                 
                ) : (
                  null
                )}
              </div>
              <div className={cx("ant-col ant-col-xs-24 ant-col-md-24 ant-col-xl-12   mb-10",styles.marginHeight)}>
                {sortedGalleryImages.six ? (
                 <>
                    <img
                      src={sortedGalleryImages.six.image}
                      className={styles.newImg}
                      onClick={() => {
                        window.open(sortedGalleryImages.six.url,"_blank");
                      }}
                    />
                    <div className={cx("flex",styles.buttonHeight)} style={{ background: sortedGalleryImages.six.textarea_bg_color}}>
                        <div className={styles.title1}>
                        {capitalizeWords(sortedGalleryImages.six.title)}
                        </div>
                        <div>
                        <a
                               className={cx("ant-btn ant-btn-primary",styles.ExplorebuttonHeight)}
                              target="_blank"
                              href={sortedGalleryImages.six.url}
                              style={{
                                color:
                                  sortedGalleryImages.six.button_text_color,
                                background:
                                  sortedGalleryImages.six.button_bg_color,
                                borderColor:
                                  sortedGalleryImages.six.button_bg_color,
                              }} rel="noreferrer"
                            >
                              {sortedGalleryImages.six.button_title}
                            </a>
                        </div>
                    </div>
                    </>
                  
                ) : (
                  null
                )}
              </div>
            </div>
            <div className={cx("ant-col ant-col-xs-24 ant-col-md-24 ant-col-xl-12   mb-10",styles.marginHeight)}>
                {sortedGalleryImages.seven ? (
                  <>
                    <img
                      src={sortedGalleryImages.seven.image}
                      className={styles.newImg}
                      onClick={() => {
                        window.open(sortedGalleryImages.seven.url,"_blank");
                      }}
                    />
                    <div className={cx("flex",styles.buttonHeight)} style={{ background: sortedGalleryImages.seven.textarea_bg_color}}>
                        <div className={styles.title1}>
                        {capitalizeWords(sortedGalleryImages.seven.title)}
                        </div>
                        <div>
                        <a
                               className={cx("ant-btn ant-btn-primary",styles.ExplorebuttonHeight)}
                              target="_blank"
                              href={sortedGalleryImages.seven.url}
                              style={{
                                color:
                                  sortedGalleryImages.seven.button_text_color,
                                background:
                                  sortedGalleryImages.seven.button_bg_color,
                                borderColor:
                                  sortedGalleryImages.seven.button_bg_color,
                              }} rel="noreferrer"
                            >
                              {sortedGalleryImages.seven.button_title}
                            </a>
                        </div>
                    </div>
                    </>
                  
                ) : (
                  null
                )}
              </div>
              <div className={cx("ant-col ant-col-xs-24 ant-col-md-24 ant-col-xl-12   mb-10",styles.marginHeight)}>
                {sortedGalleryImages.eight ? (
                  <>
                    <img
                      src={sortedGalleryImages.eight.image}
                      className={styles.newImg}
                      onClick={() => {
                        window.open(sortedGalleryImages.eight.url,"_blank");
                      }}
                    />
                    <div className={cx("flex",styles.buttonHeight)} style={{ background: sortedGalleryImages.eight.textarea_bg_color}}>
                        <div className={styles.title1}>
                        {sortedGalleryImages.eight.title}
                        </div>
                        <div>
                          <Button className={styles.buttonTitle} target="_blank"
                              href={sortedGalleryImages.eight.url}>Explore</Button>
                        </div>
                    </div>
                    </>
                  
                ) : (
                  null
                )}
              </div>
              <div className={cx("ant-col ant-col-xs-24 ant-col-md-24 ant-col-xl-12   mb-10",styles.marginHeight)}>
                {sortedGalleryImages.nine ? (
                  <>
                    <img
                      src={sortedGalleryImages.nine.image}
                      className={styles.newImg}
                      onClick={() => {
                        window.open(sortedGalleryImages.nine.url,"_blank");
                      }}
                    />
                    <div className={cx("flex",styles.buttonHeight)} >
                        <div className={styles.title1}>
                        {sortedGalleryImages.nine.title}
                        </div>
                        <div>
                          <Button className={styles.buttonTitle} >Explore</Button>
                        </div>
                    </div>
                    </>
                  
                ) : (
                  null
                )}
              </div>
        
      </div>
        )}
        </div>

      {isOpen ? (
        <Modal
          visible={isOpen}
          width={"100%"}
          onOk={() => {
            setIsOpen(!isOpen);
          }}
          onCancel={() => {
            setIsOpen(!isOpen);
          }}
          footer={null}
          destroyOnClose={true}
          bodyStyle={{ height: "100%" }}
          className={styles.modalStyles}
        >
          <div style={{ height: "100%", zIndex: 99999999999999 }}>
            <iframe
              width="100%"
              height="100%"
              src="https://www.youtube.com/embed/1OR4RFw8iZk?autoplay=1&loop=1&rel=0&showinfo=0&mute=1"
              title="YouTube video player"
              allow=" autoplay;  encrypted-media; fullscreen"
              onClick={handleClose}
            />
          </div>
        </Modal>
      ) : null}
    </>
  );
};

export default HomePage;