import './Main.sass'
import { Logo, Link, Page, Row, Padding, ModalButton, Box, Button } from '../../components/'
import { FiLogOut } from 'solid-icons/fi'
import { Tabs } from '@kobalte/core/tabs'
import { ofetch } from 'ofetch'
import { onMount, createSignal } from 'solid-js'
import dayjs from 'dayjs'

const API = import.meta.env.VITE_BACKEND
const PESO = import.meta.env.VITE_PESO
const ID = import.meta.env.VITE_ID

export default () => {
  const [totalOp, setTotalOp] = createSignal(0)
  const [assessor, setAssessor] = createSignal('')
  const [dateOp, setDateOp] = createSignal('')
  const [location, setLocation] = createSignal('')
  const [type, setType] = createSignal('')
  const [applicationId, setApplicationId] = createSignal(0)
  const [assessorId, setAssessorId] = createSignal(0)

  const [gflgu, setGflgu] = createSignal<number[]>([])
  const [gfdpwh, setGfdpwh] = createSignal<number[]>([])
  const [tfbo, setTfbo] = createSignal<number[]>([])

  const [descriptionList, setDescriptionList] = createSignal<string[]>([])
  const [amountList, setAmountList] = createSignal<string[]>([])
  const [dateOpList, setDateOpList] = createSignal<string[]>([])

  const [applicationList, setApplicationList] = createSignal<string[]>([])
  const [nameList, setNameList] = createSignal<string[]>([])

  const getListForApproval = async () => {
    try {
      const response = await ofetch(API + 'get-listopapproval-electrical', { parseResponse: JSON.parse })
      setApplicationList(response.result)
      setNameList(response.result2)
    } catch (error) {
      console.error(error)
    }
  }

  const load = async () => {
    await getListForApproval()
  }

  const getopdetails = async (applicationNo: string) => {
    const op = await ofetch(API + 'get-opdetails-electrical/' + applicationNo, { parseResponse: JSON.parse })
    setAssessor(op.result7[0])
    setLocation(op.result5[0])
    setType(op.result6[0])
    setDateOp(dayjs(op.result10[0]).format('MMMM DD, YYYY'))
    // setClient(displayFullname(op.result2[0], op.result3[0], op.result4[0]))
    setApplicationId(op.result11[0])
    setAssessorId(op.result12[0])
    setTotalOp(calculateTotal(op.result9))

    setDescriptionList(op.result8)
    setAmountList(op.result9)
    setDateOpList(op.result10)
    calculateAmounts()
  }

  const calculateTotal = (list: number[]) => {
    const total = list.map((item) => parseFloat(item.toString())).reduce((acc, curr) => acc + curr, 0)
    return total
  }

  // const displayFullname = (firstname: string, middleinitial: string, lastname: string) => {
  //   let result
  //   if (firstname.length > 0) {
  //     if (middleinitial.length > 0) {
  //       result = `${firstname} ${middleinitial}. ${lastname}`
  //     } else {
  //       result = `${firstname} ${lastname}`
  //     }
  //   } else {
  //     result = lastname
  //   }
  //   return result
  // }

  const approveHandler = async () => {
    const today = new Date()
    const formattedDate = dayjs(today).format('YYYY-MM-DD HH:mm:ss')

    for (let i = 0; i < applicationList().length; i++) {
      await ofetch(API + 'post-newstatus-electrical', {
        method: 'POST',
        body: { data: applicationId(), data2: formattedDate, data3: ID, data4: descriptionList()[i], data5: 'json' },
      })
    }
  }

  const calculateAmounts = () => {
    const amounts: string[] = amountList()
    let gflguList: number[] = []
    let gfdpwhList: number[] = []
    let tfboList: number[] = []

    for (let i = 0; i < amounts.length; i++) {
      const gflgu = parseFloat(amounts[i]) * 0.8
      const gfdpwh = parseFloat(amounts[i]) * 0.05
      const tfbo = parseFloat(amounts[i]) * 0.15

      const roundedGflgu = parseFloat(gflgu.toFixed(2))
      const roundedGfdpwh = parseFloat(gfdpwh.toFixed(2))
      const roundedTfbo = parseFloat(tfbo.toFixed(2))

      gflguList.push(roundedGflgu)
      gfdpwhList.push(roundedGfdpwh)
      tfboList.push(roundedTfbo)
    }

    setGflgu(gflguList)
    setGfdpwh(gfdpwhList)
    setTfbo(tfboList)
  }

  onMount(async () => {
    await load()
  })

  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>

            <Row content="left" gap={1}>
              <span class="name">Login Name</span>
              <Link to="/">
                <FiLogOut size={25} />
              </Link>
            </Row>
          </Row>
          <Row content="center">
            <Tabs aria-label="Main navigation" class="tabs">
              <Row>
                <Tabs.List class="tabs__list">
                  <Tabs.Trigger class="tabs__trigger" value="building">
                    Building
                  </Tabs.Trigger>
                  <Tabs.Trigger class="tabs__trigger" value="occupancy">
                    Occupancy
                  </Tabs.Trigger>
                  <Tabs.Trigger class="tabs__trigger" value="electrical">
                    Electrical
                  </Tabs.Trigger>
                  <Tabs.Indicator class="tabs__indicator" />
                </Tabs.List>
              </Row>

              <Tabs.Content class="tabs__content" value="building">
                <Row>
                  <h2>List of Ready to Approve and Sign Building Order of Payments</h2>
                </Row>
              </Tabs.Content>
              <Tabs.Content class="tabs__content" value="occupancy">
                <Row>
                  <h2>List of Ready to Approve and Sign Occupancy Order of Payments</h2>
                </Row>
              </Tabs.Content>
              <Tabs.Content class="tabs__content" value="electrical">
                <Row>
                  <h2>List of Ready to Approve and Sign Electrical Order of Payments</h2>
                </Row>

                <Row>
                  <table class="table">
                    <thead>
                      <tr>
                        <th>Application Number</th>
                        <th>Name</th>
                        <th style="text-align: center">Show Details</th>
                      </tr>
                    </thead>
                    <tbody>
                      {applicationList().map((item, index) => (
                        <tr>
                          <td>{item}</td>
                          <td>{nameList()[index]}</td>

                          <td>
                            <ModalButton
                              class="modal"
                              label="Show Details"
                              design="bo-link"
                              background="#121e2acc"
                              color="#ffffffec"
                              function={async () => {
                                await getopdetails(item)
                              }}
                            >
                              <Padding top={0} left={2} right={2} bottom={0}>
                                <Box curved thickness={1} padding="1rem">
                                  <span class="modal__application-number">{item}</span>
                                </Box>
                                <section class="modal__row">
                                  <span class="modal__row__label">Name of Applicant:</span>
                                  <span class="modal__row__detail">{nameList()[index]}</span>
                                </section>

                                <section class="modal__row">
                                  <span class="modal__row__label">Location:</span>
                                  <span class="modal__row__detail">{location()}</span>
                                </section>

                                <section class="modal__row">
                                  <span class="modal__row__label">Type:</span>
                                  <span class="modal__row__detail">{type().toUpperCase()}</span>
                                </section>

                                <section class="modal__row">
                                  <span class="modal__row__label">Assessed By:</span>
                                  <span class="modal__row__detail">{assessor()}</span>
                                </section>

                                <section class="modal__row">
                                  <span class="modal__row__label">Date Assessed:</span>
                                  <span class="modal__row__detail">{dateOp().toUpperCase()}</span>
                                </section>

                                <section class="modal__row">
                                  <span class="modal__row__label">Total Fee:</span>
                                  <span class="modal__row__detail__price">
                                    {PESO} {totalOp().toFixed(2)}
                                  </span>
                                </section>

                                <Row gap={12} padding="2rem 0 0 0">
                                  <Button label="Cancel" edges="curved" design="bo-danger"></Button>
                                  <Button label="Approve" edges="curved" design="bo-primary"></Button>
                                </Row>
                              </Padding>
                            </ModalButton>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </Row>
              </Tabs.Content>
            </Tabs>
          </Row>
        </Padding>
      </Page>
    </>
  )
}