
import useStore from '@/lib/store';
import React from 'react'
import Styles from "./top.module.scss"
import Image from 'next/image';

export default function TopPanel() {
  
  const fullScreen = useStore((s)=>s.fullScreen)
  const muted = useStore((s)=>s.muted)
  
  const handleFullscreen = () => {
    const element = document.documentElement; // Fullscreen the entire document
    if (document.fullscreenElement) {
      // Exit fullscreen
      document.exitFullscreen();
      useStore.setState({fullScreen:false})
    } else {
      // Request fullscreen
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if ((element as any).webkitRequestFullscreen) {
        (element as any).webkitRequestFullscreen(); // Safari support
      } else if ((element as any).msRequestFullscreen) {
        (element as any).msRequestFullscreen(); // IE support
      }
      useStore.setState({fullScreen:true})
    }
  }

  return (
    <React.Fragment>      
      <div className="absolute top-0 left-0 w-full">
        <div className={Styles.top}>
          <div className={Styles.left}>
            <div className={Styles.leftContent}>
              <div className='relative w-[46px] h-[46px]'>
                <Image src={"/logo.png"} layout='fill' alt='logo'/>
              </div>
              <p className='text-[#248bcf] text-[44px] leading-[44px] pl-2 pt-1'>
                CELESTIA
              </p>
            </div>
          </div>

          <div className={Styles.right}>
            <div className={Styles.rightContent}>
              <div className={!muted?`${Styles.item} ${Styles.active}`:Styles.item} onClick={()=>useStore.setState({muted:!muted})}>
                <svg viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" fill="#000000">
                  <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
                  <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
                  <g id="SVGRepo_iconCarrier">
                    <title>sound-quiet-filled</title>
                    <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
                      <g id="icon" transform="translate(42.666667, 85.333333)">
                        <path d="M276.914133,274.101547 L243.589973,247.442773 C283.38304,204.875093 283.38432,138.998827 243.588693,96.4311467 L276.912853,69.77216 C329.118507,127.992107 329.118507,215.880107 276.914133,274.101547 Z M191.749973,1.42108547e-14 L80.8957867,87.2292267 L7.10542736e-15,87.2292267 L7.10542736e-15,257.895893 L81.0208,257.895893 L191.749973,343.35424 L191.749973,1.42108547e-14 L191.749973,1.42108547e-14 Z" id="Shape"></path>
                      </g>
                    </g>
                  </g>
                </svg>
              </div>

              <div className={fullScreen?`${Styles.item} ${Styles.active}`:Styles.item} onClick={()=>handleFullscreen()}>
                <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" version="1.1" id="fullscreen" enableBackground="new 0 0 32 32" xmlSpace="preserve">
                  <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
                  <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
                  <g id="SVGRepo_iconCarrier">
                    <path d="M9 23h14V9H9V23zM11 11h10v10H11V11z"></path>
                    <polygon points="7,21 5,21 5,27 11,27 11,25 7,25 "></polygon>
                    <polygon points="7,7 11,7 11,5 5,5 5,11 7,11 "></polygon>
                    <polygon points="25,25 21,25 21,27 27,27 27,21 25,21 "></polygon>
                    <polygon points="21,5 21,7 25,7 25,11 27,11 27,5 "></polygon>
                  </g>
                </svg>
              </div>
            </div>
          </div>
        </div>
      </div>
    </React.Fragment>
  )
}