import { onMount } from 'solid-js'
import pageLogoAvif from '../../assets/images/optimized/esign.avif'
import pageLogoWebp from '../../assets/images/optimized/esign.webp'
import ocboAvif from '../../assets/images/optimized/ocbologo.avif'
import ocboWebp from '../../assets/images/optimized/ocbologo.webp'
import patAvif from '../../assets/images/optimized/pat-alcala.avif'
import patWebp from '../../assets/images/optimized/pat-alcala.webp'
import { Box, Button, Column, Copyright, Display, Footer, Image, Logo, Padding, Page, Row } from '../../components'
import { getApi } from '../../utils/functions'
import './Index.sass'

let assessorsNameList: string[]
let registeredNameList: string[]

export default () => {
  const getAssessors = async () => {
    const assessors = await getApi('get-list-assessors')
    assessorsNameList = [...assessors]
    sessionStorage.setItem('assessors', JSON.stringify([...assessorsNameList]))
  }

  const getRegistered = async () => {
    const registered = await getApi('get-list-registered')
    registeredNameList = [...registered]

    sessionStorage.setItem('registered', JSON.stringify([...registeredNameList]))
  }

  const clearCache = async () => {
    caches.keys()
  }

  onMount(async () => {
    await clearCache()
    await getAssessors()
    await getRegistered()
  })

  return (
    <>
      <Page>
        <Display desktop>
          <Padding left={4.75} right={4.75} top={0} bottom={0}>
            <Row content="split">
              <Row content="left" gap={2}>
                <Logo size={200} />
                <h1>OCBO e-Sign</h1>
              </Row>

              <Box curved thickness={0} padding="0.75rem 1.25rem" background="#0f131d56">
                <Row content="left" gap={1}>
                  <Button label="Login" edges="curved" design="bo-link" to="/login" />
                  <Button label="Register" edges="curved" design="bo-primary" to="/register" />
                </Row>
              </Box>
            </Row>

            <Row content="split">
              <Box curved thickness={0} padding="2.75rem 2rem" background="#0f131d56">
                <section class="title">
                  <h1 class="title__main">Secure e-Signature</h1>
                  <span class="title__sub">for Office of the City Building Official</span>
                  <p class="title__paragraph">A paperless and effortless solution on signing permits</p>
                </section>
              </Box>

              <Display desktop>
                <Column padding="3rem 0 0 0">
                  <Image avif={pageLogoAvif} webp={pageLogoWebp} size={410}></Image>
                </Column>
              </Display>
            </Row>
          </Padding>

          <Footer>
            <Row content="split">
              <Row gap={0.5}>
                <Image avif={ocboAvif} webp={ocboWebp} size={20}></Image>
                <Row gap={0.25}>
                  <Copyright year="2025" name="Office of the City Building Official" />
                  <span>Davao City, Philippines</span>
                </Row>
              </Row>

              <Row gap={0.25}>
                <span>Developed by:</span>
                <Image avif={patAvif} webp={patWebp} size={70}></Image>
                <span>Pat Alcala</span>
              </Row>
            </Row>
          </Footer>
        </Display>

        <Display tablet>
          <Padding left={4.75} right={4.75} top={0} bottom={0}>
            <Row content="split">
              <Row content="left" gap={2}>
                <Logo size={150} />
                <h1>OCBO e-Sign</h1>
              </Row>

              <Box curved thickness={0} padding="0.75rem 1.25rem" background="#0f131d56">
                <Row content="left" gap={1}>
                  <Button label="Login" edges="curved" design="bo-link" to="/login" />
                  <Button label="Register" edges="curved" design="bo-primary" to="/register" />
                </Row>
              </Box>
            </Row>

            <Row content="split">
              <Box curved thickness={0} padding="2.75rem 2rem" background="#0f131d56">
                <section class="title">
                  <h1 class="title__main">Secure e-Signature</h1>
                  <span class="title__sub">for Office of the City Building Official</span>
                  <p class="title__paragraph">A paperless and effortless solution on signing permits</p>
                </section>
              </Box>

              <Column padding="3rem 0 0 0">
                <Image avif={pageLogoAvif} webp={pageLogoWebp} size={110}></Image>
              </Column>
            </Row>
          </Padding>

          <Footer>
            <Row content="split">
              <Row gap={0.5}>
                <Image avif={ocboAvif} webp={ocboWebp} size={20}></Image>
                <Row gap={0.25}>
                  <Copyright year="2025" name="Office of the City Building Official" />
                  <span>Davao City, Philippines</span>
                </Row>
              </Row>

              <Row gap={0.25}>
                <span>Developed by:</span>
                <Image avif={patAvif} webp={patWebp} size={70}></Image>
                <span>Pat Alcala</span>
              </Row>
            </Row>
          </Footer>
        </Display>

        <Display mobile>
          <Column>
            <Logo size={120} />
            <h1>OCBO e-Sign</h1>
            <span>Please use OCBO e-Sign Mobile Version</span>
          </Column>
        </Display>
      </Page>
    </>
  )
}