import './Index.sass'
import { Button, Page, Padding, Display, Row, Logo, Footer, Image, Copyright } from '../../components'
import { onMount } from 'solid-js'
import { ofetch } from 'ofetch'
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'

const API = import.meta.env.VITE_BACKEND
let assessorsNameList: string[]
let registeredNameList: string[]

export default () => {
  const getAssessors = async () => {
    try {
      const assessors = await ofetch(API + 'get-list-assessors', { parseResponse: JSON.parse })
      assessorsNameList = [...assessors.result]
    } catch (error) {
      console.error(error)
    }
    sessionStorage.setItem('assessors', JSON.stringify([...assessorsNameList]))
  }

  const getRegistered = async () => {
    let nameList: string[] = []

    try {
      const registered = await ofetch(API + 'get-list-registered', { parseResponse: JSON.parse })

      for (let i = 0; i < registered.result.length; i++) {
        const name = await ofetch(API + 'get-employeename/' + registered.result[i], { parseResponse: JSON.parse })
        nameList.push(name.result)
      }

      registeredNameList = [...nameList]
    } catch (error) {
      console.error(error)
    }
    sessionStorage.setItem('registered', JSON.stringify([...registeredNameList]))
  }

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

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

              <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>
            </Row>
          </Display>
        </Padding>

        <Footer>
          <Row content="split">
            <Row gap={0.5}>
              <Image avif={ocboAvif} webp={ocboWebp} size={30}></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={90}></Image>
              <span>Pat Alcala</span>
            </Row>
          </Row>
        </Footer>
      </Page>
    </>
  )
}