import './Table.sass'
import { createSignal } from 'solid-js'
import { ofetch } from 'ofetch'
// import { Button } from '../../components'

const api = import.meta.env.BACKEND

export default () => {
  const [updatedList, setUpdatedList] = createSignal<string[]>([])

  const getListOfReadyForApproval = async () => {
    const response = await ofetch(api + 'get-listopapproval-electrical', { parseResponse: JSON.parse })
    return response.result
  }

  const getListOfReadyForApprovalFiltered = async (list: number[]) => {
    let newList = []

    for (let i = 0; i < 10; i++) {
      const response = await ofetch(api + 'get-laststatus-electrical/' + list[i], { parseResponse: JSON.parse })
      if (response.result === 'FOR ELECTRICAL ORDER OF PAYMENT APPROVAL') {
        newList.push(list[i])
      }
    }

    return [...newList]
  }

  const getApplicationById = async (list: number[]) => {
    let applicationList: string[] = []

    for (let i = 0; i < list.length; i++) {
      const response = await ofetch(api + 'get-applicationbyid-electrical/' + list[i], { parseResponse: JSON.parse })
      applicationList.push(response.result)
    }

    setUpdatedList([...applicationList])
  }

  const load = async () => {
    const listOfReadyForApproval = await getListOfReadyForApproval()
    const listOfReadyForApprovalFiltered = await getListOfReadyForApprovalFiltered(listOfReadyForApproval)
    await getApplicationById(listOfReadyForApprovalFiltered)
  }

  load()

  return (
    <>
      <table class="table">
        <thead>
          <tr>
            <th>Application Number</th>
            <th>Name</th>
          </tr>
        </thead>
        <tbody>
          {updatedList().map((item: any) => (
            <tr>
              <td>{item.slice(0, 1)}</td>
            </tr>
          ))}

          {/* <tr>
            <td>111</td>
            <td>11</td>
            <td>
              <Button label="Show Details" design="bu-ghost" />
            </td>
          </tr>
          <tr>
            <td>222</td>
            <td>11</td>
            <td>
              <Button label="Show Details" design="bu-ghost" />
            </td>
          </tr> */}
        </tbody>
      </table>
    </>
  )
}

// ;<For each={instance.getPaginationRowModel().rows}>
//   {(row) => (
//     <tr {...row.getRowProps()}>
//       <For each={row.getVisibleCells()}>{(cell) => <td {...cell.getCellProps()}>{cell.renderCell()}</td>}</For>
//     </tr>
//   )}
// </For>
