import React, { useEffect, useState } from 'react'
import Styles from "./TutorialPopup.module.scss"
import useStore from '@/lib/store'

export default function TutorialPopup() {
  
  const tutorial = useStore((s)=>s.tutorial)

  return (

    <React.Fragment>
      <div className={`absolute left-0 top-0 w-full h-full min-h-screen overflow-hidden pointer-events-auto ${tutorial?"block":"hidden"}`}>
        <div className='relative bg-black bg-opacity-80 h-full flex items-center justify-center z-50'>
          <div className='relative w-full mx-4 md:mx-0 sm:max-w-[520px] text-center text-[#248bcf] text-[12px] md:text-[14px] leading-[16px] md:leading-[20px] select-none'>
            <button className='absolute z-10 top-2 right-2 md:top-4 md:right-4 w-4 h-4 pointer-events-auto'
              onClick={(e)=>{useStore.setState({tutorial:false}), e.stopPropagation()}}
            >
              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                
                <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
                <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
                <g id="SVGRepo_iconCarrier">
                  <path d="M20.7457 3.32851C20.3552 2.93798 19.722 2.93798 19.3315 3.32851L12.0371 10.6229L4.74275 3.32851C4.35223 2.93798 3.71906 2.93798 3.32854 3.32851C2.93801 3.71903 2.93801 4.3522 3.32854 4.74272L10.6229 12.0371L3.32856 19.3314C2.93803 19.722 2.93803 20.3551 3.32856 20.7457C3.71908 21.1362 4.35225 21.1362 4.74277 20.7457L12.0371 13.4513L19.3315 20.7457C19.722 21.1362 20.3552 21.1362 20.7457 20.7457C21.1362 20.3551 21.1362 19.722 20.7457 19.3315L13.4513 12.0371L20.7457 4.74272C21.1362 4.3522 21.1362 3.71903 20.7457 3.32851Z" fill="#0c67a1"></path>
                </g>
              </svg>
            </button>
            <div className={Styles.head}></div>
            <div className='relative border-x border-[#0c67a1] bg-[#010913F3] px-3 flex flex-col gap-4' style={{fontFamily:'Electrolize'}}>
              <h1 className='text-[#42edf8] text-[24px] sm:text-[34px] leading-[24px] sm:leading-[34px] font-bold'>Welcome to Celestia</h1>
              <p>Navigate, explore, and search the stars and constellations.</p>
              <div className='grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-4'>
                <div className={Styles.element}>
                  <div>
                    <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">
                        <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
                          <g id="drop" fill="#42edf8" transform="translate(42.666667, 42.666667)">
                            <path d="M234.666667,256 L234.666667,341.333333 L277.333333,341.333333 L213.333333,426.666667 L149.333333,341.333333 L192,341.333333 L192,256 L234.666667,256 Z M341.333333,149.333333 L426.666667,213.333333 L341.333333,277.333333 L341.333333,234.666667 L256,234.666667 L256,192 L341.333333,192 L341.333333,149.333333 Z M85.3333333,149.333333 L85.3333333,192 L170.666667,192 L170.666667,234.666667 L85.3333333,234.666667 L85.3333333,277.333333 L3.55271368e-14,213.333333 L85.3333333,149.333333 Z M213.333333,3.55271368e-14 L277.333333,85.3333333 L234.666667,85.3333333 L234.666667,170.666667 L192,170.666667 L192,85.3333333 L149.333333,85.3333333 L213.333333,3.55271368e-14 Z" id="Combined-Shape">
                            </path>
                          </g>
                        </g>
                      </g>
                    </svg>
                  </div>
                  <div>
                    <div className='text-[16px] md:text-[20px] font-bold'>Pan</div>
                    <div>Right-click and drag to move around the scene</div>
                  </div>
                </div>
                <div className={Styles.element}>
                  <div>
                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
                      <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
                      <g id="SVGRepo_iconCarrier">
                        <path d="M20 20L14.9497 14.9498M14.9497 14.9498C16.2165 13.683 17 11.933 17 10C17 6.13401 13.866 3 10 3C6.13401 3 3 6.13401 3 10C3 13.866 6.13401 17 10 17C11.933 17 13.683 16.2165 14.9497 14.9498ZM7 10H13M10 7V13" stroke="#42edf8" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"></path>
                      </g>
                    </svg>
                  </div>
                  <div>
                    <div className='text-[16px] md:text-[20px] font-bold'>Zoom</div>
                    <div>Use mouse scroll wheel to zoom in and out</div>
                  </div>
                </div>
                <div className={Styles.element}>
                  <div>
                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
                      <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
                      <g id="SVGRepo_iconCarrier">
                        <path d="M17.5689 10.205C17.6829 10.6032 18.0981 10.8336 18.4964 10.7196C18.8946 10.6056 19.125 10.1904 19.011 9.7922L17.5689 10.205ZM16.59 7.0486L17.1301 6.52824L17.1295 6.52764L16.59 7.0486ZM13.111 5.1336L13.2625 4.39907L13.2611 4.39878L13.111 5.1336ZM9.18996 5.5336L8.89453 4.84424L8.89379 4.84456L9.18996 5.5336ZM6.14396 8.1096L5.51365 7.70314L5.51364 7.70315L6.14396 8.1096ZM6.98796 16.9486L7.53029 16.4306L7.52996 16.4302L6.98796 16.9486ZM15.557 17.8196L15.984 18.4362L15.9841 18.4361L15.557 17.8196ZM18.7536 14.9554C18.907 14.5706 18.7195 14.1343 18.3347 13.9809C17.95 13.8275 17.5137 14.0151 17.3603 14.3998L18.7536 14.9554ZM17.5641 9.80996C17.4599 10.2109 17.7004 10.6203 18.1013 10.7245C18.5022 10.8287 18.9117 10.5881 19.0158 10.1872L17.5641 9.80996ZM19.7258 7.45525C19.83 7.05435 19.5895 6.6449 19.1886 6.54072C18.7877 6.43653 18.3783 6.67706 18.2741 7.07796L19.7258 7.45525ZM18.0902 10.7215C18.4894 10.8318 18.9025 10.5976 19.0129 10.1984C19.1232 9.79911 18.889 9.38602 18.4897 9.2757L18.0902 10.7215ZM15.8407 8.5437C15.4415 8.43337 15.0284 8.66759 14.918 9.06684C14.8077 9.46609 15.0419 9.87919 15.4412 9.98951L15.8407 8.5437ZM19.011 9.7922C18.6602 8.56683 18.0144 7.44613 17.1301 6.52824L16.0498 7.56897C16.764 8.31028 17.2856 9.21537 17.5689 10.205L19.011 9.7922ZM17.1295 6.52764C16.0842 5.44503 14.7364 4.70315 13.2625 4.39907L12.9594 5.86813C14.1375 6.11119 15.2148 6.7042 16.0504 7.56956L17.1295 6.52764ZM13.2611 4.39878C11.7942 4.09906 10.2707 4.25448 8.89453 4.84424L9.48538 6.22297C10.5807 5.75356 11.7933 5.62986 12.9608 5.86842L13.2611 4.39878ZM8.89379 4.84456C7.50796 5.44022 6.33115 6.43545 5.51365 7.70314L6.77426 8.51607C7.43013 7.49901 8.37429 6.70054 9.48612 6.22265L8.89379 4.84456ZM5.51364 7.70315C3.52854 10.7816 3.91413 14.8198 6.44595 17.467L7.52996 16.4302C5.47778 14.2845 5.16523 11.0113 6.77427 8.51605L5.51364 7.70315ZM6.44562 17.4666C8.95364 20.0923 12.9989 20.5035 15.984 18.4362L15.13 17.203C12.7516 18.8501 9.52855 18.5225 7.53029 16.4306L6.44562 17.4666ZM15.9841 18.4361C17.2293 17.5732 18.1926 16.3625 18.7536 14.9554L17.3603 14.3998C16.9084 15.5332 16.1326 16.5082 15.1298 17.2032L15.9841 18.4361ZM19.0158 10.1872L19.7258 7.45525L18.2741 7.07796L17.5641 9.80996L19.0158 10.1872ZM18.4897 9.2757L15.8407 8.5437L15.4412 9.98951L18.0902 10.7215L18.4897 9.2757Z" fill="#42edf8"></path>
                      </g>
                    </svg>
                  </div>
                  <div>
                    <div className='text-[16px] md:text-[20px] font-bold'>Rotate</div>
                    <div>Left-click and drag to rotate the view</div>
                  </div>
                  
                </div>
                <div className={Styles.element}>
                  <div>
                    <svg className='scale-75' fill="#000000" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="0 0 512.228 512.228" xmlSpace="preserve">
                      <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>                      
                      <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>                      
                      <g id="SVGRepo_iconCarrier"> 
                        <g> 
                          <g>
                            <path d="M509.862,481.179L275.195,11.845c-7.862-15.724-30.3-15.724-38.162,0L2.366,481.179 c-9.676,19.353,12.28,39.155,30.534,27.539l223.213-142.045l223.213,142.045C497.581,520.334,519.538,500.531,509.862,481.179z M267.567,323.388c-6.988-4.447-15.919-4.447-22.907,0L74.973,431.371L256.114,69.089l181.141,362.282L267.567,323.388z" fill="#42edf8"></path>
                          </g>
                        </g>
                      </g>
                    </svg>
                  </div>
                  <div>
                    <div className='text-[16px] md:text-[20px] font-bold'>Forward/backward</div>
                    <div>Press W/D to move forward and backward.</div>
                  </div>
                  
                </div>
                <div className={`${Styles.element} md:col-span-2`}>
                  <div>
                    <svg className='scale-125' viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
                    <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
                      <g id="SVGRepo_iconCarrier">
                        <path d="M14.5776 14.5419C15.5805 13.53 16.2 12.1373 16.2 10.6C16.2 7.50721 13.6928 5 10.6 5C7.50721 5 5 7.50721 5 10.6C5 13.6928 7.50721 16.2 10.6 16.2C12.1555 16.2 13.5628 15.5658 14.5776 14.5419ZM14.5776 14.5419L19 19M8 11L9.5 12.5L13 9" stroke="#42edf8" strokeLinecap="round" strokeLinejoin="round"></path>
                      </g>
                    </svg>
                  </div>
                  <div>
                    <div className='text-[16px] md:text-[20px] font-bold'>Search</div>
                    <div>Use the search box in the bottom-right corner to find specific stars</div>
                  </div>
                  
                </div>
              </div>
              <div>
                <button 
                  className='px-4 py-2 border text-[16px] md:text-[20px] leading-[16px] md:leading-[20px] border-[#0c67a1]'
                  onClick={(e)=>{useStore.setState({tutorial:false}), e.stopPropagation()}}
                >
                  Start Exploring
                </button>
              </div>
            </div>
            <div className={Styles.footer}></div>
          </div>
        </div>
      </div>
    </React.Fragment>
  )
}