import './Register.sass'
import { Logo, Link, Page, Row, Padding, Form, Combobox, Box, File } from '../../components'
import { IoChevronBack } from 'solid-icons/io'
import { Show, createSignal } from 'solid-js'

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

  const [role, setRole] = createSignal('')
  const [name, setName] = createSignal('')

  return (
    <>
      <Page alignment="column">
        <Padding left={4.75} right={4.75}>
          <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}>
            <Row>
              <Box curved thickness={2} padding={2} color="#2f465cd7">
                <Row>
                  <span class="box-title">Registration</span>
                </Row>
                <Form>
                  <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={setName} />
                    <h4>Upload Signature</h4>
                    <File />
                  </Show>
                  <Show when={role() === 'APPROVER'}>
                    <h4>Name of Approver</h4>
                    <span class="approver-name">ARCH. KHASHAYAR L. TOGHYANI</span>
                    <h4>Upload Signature</h4>
                    <File />
                  </Show>
                </Form>
              </Box>
            </Row>
          </Padding>
        </Padding>
      </Page>
    </>
  )
}