import './Register.sass'
import { Logo, Link, Page, Row, Padding, Combobox, Box, File, Button, Modal, Column } from '../../components'
import { IoChevronBack } from 'solid-icons/io'
import { Show, createSignal } from 'solid-js'
import { ofetch } from 'ofetch'
import { SHA3 } from 'crypto-js'

export default () => {
  const API = import.meta.env.VITE_BACKEND
  const assessors = JSON.parse(sessionStorage.getItem('assessors')!)
  const roles = ['ASSESSOR', 'APPROVER']

  const [role, setRole] = createSignal('')
  const [name, setName] = createSignal('')
  const [id, setId] = createSignal(0)
  const [signature, setSignature] = createSignal('')
  const [saved, setSaved] = createSignal(false)

  const getEmployeeId = async (val: string) => {
    try {
      setName(val)
      const id = await ofetch(API + 'get-employeeid/' + val, { parseResponse: JSON.parse })
      setId(id.result)
    } catch {
      setId(0)
    }
  }

  const generateSignature = () => {
    const hash = SHA3(id().toString())
    setSignature(hash.toString())

    try {
      register()
      setSaved(true)
    } catch {
      setSaved(false)
    }
  }

  const register = async () => {
    await ofetch(API + 'post-registration', {
      method: 'POST',
      body: { data: id(), data2: signature() },
    })
  }

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

            <Link to="/">
              <Row content="right">
                <IoChevronBack size={45} />
                <span class="back-button-text">Back</span>
              </Row>
            </Link>
          </Row>

          <Padding top={2} left={0} right={0} bottom={0}>
            <Row>
              <Box curved thickness={2} padding={2} color="#2f465cd7">
                <Row>
                  <span class="box-title">Registration</span>
                </Row>
                <h4>Role</h4>
                <Combobox options={roles} placeholder="Select your role" value={role()} onChange={setRole} />
                <Show when={role() === 'ASSESSOR'}>
                  <h4>List of Assessors</h4>
                  <Combobox options={assessors} placeholder="Select your name" value={name()} onChange={(val) => getEmployeeId(val!)} />
                  <h4>Upload Signature</h4>
                  <File />

                  <Padding top={2} bottom={0} left={0} right={0}>
                    <Row>
                      <Button edges="curved" design="bo-primary" label="Register" onClick={generateSignature} />
                    </Row>
                  </Padding>
                </Show>
                <Show when={role() === 'APPROVER'}>
                  <h4>Name of Approver</h4>
                  <span class="approver-name">ARCH. KHASHAYAR L. TOGHYANI</span>
                  <h4>Upload Signature</h4>
                  <File />

                  <Padding top={2} bottom={0} left={0} right={0}>
                    <Row>
                      <Button edges="curved" design="bo-primary" label="Register" onClick={generateSignature} />
                    </Row>
                  </Padding>
                </Show>
              </Box>
            </Row>
          </Padding>
        </Padding>
      </Page>

      <Modal trigger={!saved()} background="#0f1720f3" color="#ffffffe4">
        <Padding top={1} bottom={1} left={4} right={4}>
          <Column>
            <Row>
              <span>e-Sign Registration Complete</span>
            </Row>

            <span>e-Sign Registration Complete</span>
          </Column>
        </Padding>
      </Modal>
    </>
  )
}