import { Image, Modal } from "antd";
import { FC, useEffect, useState } from "react";
import styles from "./videoSectionPage.module.scss";

import {
	CaretRightOutlined
} from "@ant-design/icons";
const VideoSectionPage:FC<any>=({images,sellerData})=>{
const [isOpen,setIsOpen] = useState(false);
const [bannerImg, setBannerImg] = useState<any>();
    function extractContent(s:any) {
        const span = document.createElement('span');
        span.innerHTML = s;
        return span.textContent || span.innerText;
      }
    
      const img = images?.find((e:any) => e.sort === '1');
      const banner_img = images?.find((e:any) => e.sort === '10');
      const handleClose = () => {
        setIsOpen((state) => !state);
      };

      useEffect(() => {
        if (sellerData.banner && sellerData.banner.length) {
          const banner = JSON.parse(sellerData.banner)?.[0]?.url;
          setBannerImg(`${banner}`);
        }
      }, [sellerData])
      
 
      
    return(
        <>
            <div className={styles.videoDetailsContainer} style={{backgroundImage: `url(${banner_img?.image})`,width:"100%",backgroundPosition:"center",backgroundRepeat:"no-repeat",backgroundSize:"cover"}}>
            <Image
              src={img?.image}
              className={styles.imagesStyle}
              preview={false}
              onClick={()=>{setIsOpen(!isOpen)}}
            />
            <div className={styles.imagePlay} style={{background:sellerData?.menu_bg_color}}  onClick={()=>{setIsOpen(!isOpen)}}>
            <CaretRightOutlined  style={{color:"#fff",fontSize:"40px"}}  onClick={()=>{setIsOpen(!isOpen)}}/>
            </div>
            <Modal
              visible={isOpen}
              width={"90%"}

              onOk={() => {
                setIsOpen(!isOpen);
              }}
              onCancel={() => {
                setIsOpen(!isOpen);
              }}
              footer={null}
              style={{ height: "100%", width: "90%", margin:"0 auto",maxWidth:"880px", }}
              destroyOnClose={true}
              bodyStyle={{ height: "100%" }}
              className={styles.modalStyles}
            >
              <div style={{ height: "100%", zIndex: 99999999999999 }}>
                 <iframe
                  width="100%"
                  height="480px"
                  src={`${img?.url}`}
                  title="YouTube video player"
                  allow="fullscreen webkitallowfullscreen"
                  onClick={handleClose}
                  style={{maxWidth:"800px",margin:"0 auto"}}
                
                 
                />
              </div>
            </Modal>
            </div>
        </>
    )

}

export default VideoSectionPage;