import {
  deleteNote,
  exportTimekeeping,
  getListMaster,
  getTheTimesheet,
  updateMultipleUserWorkingTime,
  updateNote,
  updateWorkingDays,
} from '@/api/Admin'
import { update, Xdelete } from '@/rtk/helpers/CRUD'
import { exportFile, get } from '@/rtk/helpers/apiService'
import {
  Avatar,
  Box,
  Button,
  Drawer,
  Image,
  Menu,
  MultiSelect,
  Select,
  Table,
  Text,
  Textarea,
  TextInput,
  Tooltip,
  Modal,
} from '@mantine/core'
import { useDisclosure } from '@mantine/hooks'
import { notifications } from '@mantine/notifications'
import {
  IconCheck,
  IconExclamationMark,
  IconPointFilled,
  IconTrash,
  IconX,
  IconFileExcel,
} from '@tabler/icons-react'
import moment from 'moment'
import { useEffect, useState } from 'react'

import classes from './Timekeeping.module.css'

interface User {
  id: number
  name: string
  email: string
  email_verified_at: string | null
  permission: string
  remember_token: string | null
  avatar: string
  created_at: string | null
  updated_at: string | null
}

interface DataReason {
  id: number
  c_code: string
  c_name: string
}

interface DataTimeType {
  id: number
  c_code: string
  c_name: string
}

interface HistoryValue {
  id: number
  name: string
  user_id: number
  status: string
  time_string: string
  image: string
  created_at: string
  updated_at: string
}

interface NoteValue {
  id: number
  note: string
  reason: string
  timeType: string
  reasonName: string
  timeTypeName: string
}

interface History {
  values: HistoryValue[]
  total: number
  day: number
  notes: NoteValue[]
}

interface UserData {
  user: User
  history: History[]
}

const Timekeeping = () => {
  const [opened1, { open: open1, close: close1 }] = useDisclosure(false)
  const [opened2, { open: open2, close: close2 }] = useDisclosure(false)
  const [disableBtn, setDisableBtn] = useState(false)
  const [daysInMonth, setDaysInMonth] = useState(
    Array.from({ length: 31 }, (_, index) => index + 1),
  )
  const [customAddData, setCustomAddData] = useState<{
    data: string[]
    type: string
    day: number
  }>({
    data: [],
    type: '',
    day: 0,
  })
  const [customAddNotes, setCustomAddNotes] = useState<{
    user: {
      id: number
      name: string
    }
    type: string
    reason: string
    note: string
    day: number
    notes: NoteValue[]
  }>({
    user: {
      id: 0,
      name: '',
    },
    type: '',
    reason: '',
    note: '',
    day: 0,
    notes: [],
  })

  const [workingDays, setWorkingDays] = useState(30)
  const [data, setData] = useState<UserData[]>([])
  const [date, setDate] = useState({
    month: (new Date().getMonth() + 1).toString(),
    year: new Date().getFullYear().toString(),
  })

  const [dataTimeType, setDataTimeType] = useState<DataTimeType[]>([])
  const [dataReason, setDataReason] = useState<DataReason[]>([])

  const [exportModalOpened, setExportModalOpened] = useState(false)
  const [exportOption, setExportOption] = useState('default')

  const [isDeleteConfirmOpen, setIsDeleteConfirmOpen] = useState(false)
  const [noteToDelete, setNoteToDelete] = useState<any>(null)

  const getListMasterByType = async (type: string) => {
    try {
      const params = {
        type: type,
      }
      const res = await get(getListMaster, params)
      if (res.status) {
        return res.data
      }
    } catch (error: any) {
      notifications.show({
        title: 'Error',
        message: error.message ?? error,
        color: 'red',
      })
    }
    return []
  }

  useEffect(() => {
    const fetchData = async () => {
      const resultTimeType = await getListMasterByType('TIME_TYPE')
      setDataTimeType(resultTimeType)

      const resultReason = await getListMasterByType('REASON')
      setDataReason(resultReason)
    }

    fetchData()
  }, [])

  const getTimeSheet = async () => {
    try {
      const res = await get(getTheTimesheet, {
        month: date.month,
        year: date.year,
      })
      if (res.status) {
        setData(
          res.data.filter((u: UserData) => u.user.permission.includes('staff')),
        )

        if (
          res.data.find(
            (item: UserData) => item.user.id === customAddNotes.user.id,
          )?.user.id
        ) {
          setCustomAddNotes({
            ...customAddNotes,
            notes: (res.data
              .find((item: UserData) => item.user.id === customAddNotes.user.id)
              ?.history?.find(
                (itemHistory: History) =>
                  itemHistory.day === customAddNotes.day,
              )?.notes ?? []) as NoteValue[],
          })
        }

        setDaysInMonth(
          Array.from({ length: getDaysInMonth() }, (_, index) => index + 1),
        )

        setWorkingDays(res.working_days ?? 30)
      }
    } catch (error: any) {
      console.log(error)
      notifications.show({
        title: 'Error',
        message: error.message ?? error,
        color: 'red',
      })
    }
  }

  function getDayName(dateString: string) {
    // Tạo đối tượng Date từ chuỗi ngày tháng năm
    const date = new Date(dateString)

    // Lấy ngày trong tuần (0-6)
    const dayNumber = date.getDay()

    // Mảng chứa các tên ngày bằng tiếng Việt
    const daysInVietnamese = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']

    // Trả về tên ngày bằng tiếng Việt
    return daysInVietnamese[dayNumber]
  }

  function getDaysInMonth() {
    // Tạo một đối tượng Date cho ngày đầu tiên của tháng tiếp theo
    // Chú ý: tháng trong đối tượng Date là từ 0 (tháng 1) đến 11 (tháng 12)
    const days = new Date(parseInt(date.year), parseInt(date.month), 0)
    // Trả về ngày, tức là số ngày trong tháng
    return days.getDate()
  }

  const updateMultipleUser = async (
    users: number[],
    day: number,
    type: string,
  ) => {
    try {
      await update(
        updateMultipleUserWorkingTime,
        {
          users: users,
          year: date.year,
          month: date.month,
          day: day,
          type: type,
        },
        getTimeSheet,
      )

      setDisableBtn(false)
    } catch (error) {
      console.log(error)
    }
  }

  const updateInfoNote = async (
    users: {
      id: number
      name: string
    },
    day: number,
    type: string,
    reason: string,
    note: string,
  ) => {
    try {
      await update(
        updateNote,
        {
          month: date.month,
          year: date.year,
          users: users,
          type: type,
          reason: reason,
          note: note,
          day: day,
        },
        getTimeSheet,
      )

      setDisableBtn(false)
    } catch (error) {
      console.log(error)
    }
  }

  const handleUpdateWorkingDays = async () => {
    try {
      await update(
        updateWorkingDays,
        {
          working_days: workingDays,
          year: date.year,
          month: date.month,
        },
        getTimeSheet,
      )
    } catch (error) {
      console.log(error)
    }
  }
  // const handleUpdateCacheMonth = async () => {
  //   try {
  //     await update(
  //       updateCacheMonth,
  //       {
  //         year: date.year,
  //         month: date.month,
  //       },
  //       getTimeSheet,
  //     )
  //   } catch (error) {
  //     console.log(error)
  //   }
  // }

  useEffect(() => {
    getTimeSheet()
  }, [date])

  const showTooltipNote = (user: UserData, d: number) => {
    return user.history
      .find((h) => h.day === d && h.notes && h.notes.length > 0)
      ?.notes.map((v, index) => {
        return (
          <p key={index}>
            - {v.reasonName} ({v.timeTypeName}): {v.note}
          </p>
        )
      })
  }
  const showTooltipAllNote = (user: UserData) => {
    return (
      <table style={{ borderCollapse: 'collapse', width: '100%' }}>
        <tbody>
          {user.history
            .filter((h) => h.notes && h.notes.length > 0)
            .map((h, index) => (
              <tr key={index} className={classes.historyRow}>
                <td
                  style={{
                    border: '0',
                    verticalAlign: 'top',
                    fontWeight: 'bold',
                  }}
                >
                  Day {h.day}:
                </td>
                <td style={{ border: '0', paddingLeft: '10px' }}>
                  {h.notes.map((v, noteIndex) => (
                    <p key={noteIndex} style={{ margin: '0' }}>
                      - {v.reasonName} ({v.timeTypeName}): {v.note}
                    </p>
                  ))}
                </td>
              </tr>
            ))}
        </tbody>
      </table>
    )
  }

  const showTooltip = (user: UserData, total: number, d: number) => {
    return (
      <div key={d}>
        {`Total: ${(total / 60 / 60).toFixed(1)}h`}
        {user.history
          .find((h) => h.day === d)
          ?.values.map((v) => {
            return (
              <Box
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'space-between',
                }}
                key={v.id}
              >
                <p>{v.status + ': ' + v.time_string}</p>{' '}
                {v.image && (
                  <Image
                    w={100}
                    h={100}
                    src={
                      import.meta.env.VITE_BACKEND_URL.includes('local')
                        ? import.meta.env.VITE_BACKEND_URL +
                          'storage/' +
                          v.image
                        : import.meta.env.VITE_BACKEND_URL +
                          'image/storage/' +
                          v.image
                    }
                  />
                )}
              </Box>
            )
          })}
        {showTooltipNote(user, d)}
      </div>
    )
  }

  const handleDelete = async (id: number) => {
    try {
      await Xdelete(
        deleteNote,
        { id: id, month: date.month, year: date.year },
        getTimeSheet,
      )
    } catch (error) {
      console.log(error)
    }
  }

  const handleOpenNote = (user: UserData, d: number) => {
    open2()
    setCustomAddNotes({
      ...customAddNotes,
      day: d,
      user: {
        id: user.user.id,
        name: user.user.name,
      },
      notes:
        user.history.find((h) => h.day === d && h.notes && h.notes.length > 0)
          ?.notes ?? [],
    })
  }

  const handleExport = async (option: string) => {
    try {
      const timestamp = moment().format('DDMMYYYY_HHmmss')
      const fileName = `Timekeeping_${date.month}_${date.year}_${timestamp}.xlsx`

      await exportFile(
        exportTimekeeping,
        {
          month: date.month,
          year: date.year,
          working_days: workingDays,
          option: option,
        },
        fileName,
      )
      setExportModalOpened(false)
    } catch (error) {
      console.error('Export error:', error)
    }
  }

  const handleConfirmDelete = async () => {
    if (noteToDelete) {
      await handleDelete(noteToDelete.id)
      setIsDeleteConfirmOpen(false)
      setNoteToDelete(null)
    }
  }

  const openDeleteConfirm = (note: any) => {
    setNoteToDelete(note)
    setIsDeleteConfirmOpen(true)
  }

  const DeleteConfirmModal = () => (
    <Modal
      opened={isDeleteConfirmOpen}
      onClose={() => {
        setIsDeleteConfirmOpen(false)
        setNoteToDelete(null)
      }}
      centered
      size="sm"
      classNames={{
        content: classes.deleteModal,
      }}
    >
      <Text className={classes.deleteModalTitle}>Confirm Delete</Text>
      <Text className={classes.deleteModalContent}>
        This action will change the ticket status to <strong>Refused</strong>{' '}
        and delete all related notes.
      </Text>
      <Text className={classes.deleteModalContent}>
        Are you sure you want to proceed?
      </Text>
      <Box className={classes.deleteModalFooter}>
        <Button
          variant="outline"
          onClick={() => {
            setIsDeleteConfirmOpen(false)
            setNoteToDelete(null)
          }}
        >
          Cancel
        </Button>
        <Button className={classes.deleteButton} onClick={handleConfirmDelete}>
          Delete
        </Button>
      </Box>
    </Modal>
  )

  return (
    <div>
      <div className={classes.title}>
        <h3>Timekeeping</h3>
      </div>
      <Drawer
        opened={opened1}
        onClose={close1}
        position="right"
        title={<strong>Add custom worklog</strong>}
      >
        <MultiSelect
          mb={'md'}
          searchable
          label="User(s)"
          data={data.map((user) => {
            return { value: user.user.id.toString(), label: user.user.name }
          })}
          onChange={(e) => {
            setCustomAddData({ ...customAddData, data: e })
          }}
        />
        <Select
          mb={'md'}
          label="Type"
          data={[
            { value: 'half', label: 'Half day' },
            { value: 'one', label: 'A day' },
          ]}
          onChange={(e) => {
            setCustomAddData({ ...customAddData, type: e! })
          }}
        />
        <Button
          onClick={() => {
            setDisableBtn(true)
            if (
              customAddData.type === '' ||
              customAddData.data.length === 0 ||
              customAddData.day === 0
            ) {
              notifications.show({
                title: 'Error',
                message: 'Input data required',
                color: 'red',
              })
              setDisableBtn(false)
            } else {
              updateMultipleUser(
                customAddData.data.map((u) => parseInt(u)),
                customAddData.day,
                customAddData.type,
              )
            }
          }}
          disabled={disableBtn}
        >
          Submit
        </Button>
      </Drawer>

      {/* Form Save Note */}
      <Drawer
        opened={opened2}
        onClose={close2}
        position="right"
        title={<strong>Save Note</strong>}
      >
        <p>
          <span style={{ fontWeight: 'bold' }}>User</span>:{' '}
          {customAddNotes.user.name}
          <span style={{ paddingLeft: '10px', paddingRight: '10px' }}>|</span>
          <span style={{ fontWeight: 'bold' }}>Day</span>: {customAddNotes.day}
        </p>
        <Select
          mb={'md'}
          searchable
          label="Reason"
          data={dataReason.map((user) => ({
            value: user.c_code.toString(),
            label: user.c_name,
          }))}
          onChange={(e) => {
            setCustomAddNotes({ ...customAddNotes, reason: e! })
          }}
        />
        {customAddNotes.reason != '' && (
          <Select
            mb={'md'}
            label="Time Type"
            data={dataTimeType.map((item) => {
              return { value: item.c_code.toString(), label: item.c_name }
            })}
            onChange={(e) => {
              setCustomAddNotes({ ...customAddNotes, type: e! })
            }}
          />
        )}
        {customAddNotes.type != '' && (
          <Textarea
            mb={'md'}
            label="Note"
            onChange={(e) => {
              setCustomAddNotes({ ...customAddNotes, note: e.target.value })
            }}
          />
        )}
        <Button
          onClick={() => {
            setDisableBtn(true)
            if (
              customAddNotes.type === '' ||
              customAddNotes.reason === '' ||
              customAddNotes.note === '' ||
              customAddNotes.day === 0 ||
              customAddNotes.user.id === 0
            ) {
              notifications.show({
                title: 'Error',
                message: 'Input data required',
                color: 'red',
              })
              setDisableBtn(false)
            } else {
              updateInfoNote(
                customAddNotes.user,
                customAddNotes.day,
                customAddNotes.type,
                customAddNotes.reason,
                customAddNotes.note,
              )
            }
          }}
          disabled={disableBtn}
        >
          Save
        </Button>
        {customAddNotes.notes.map((item, index) => {
          return (
            <Box
              key={index}
              display="flex"
              className="text-muted"
              style={{
                marginTop: '10px',
                border: '1px solid #ccc',
                borderRadius: '5px',
                marginBottom: '10px',
                padding: '10px',
                justifyContent: 'space-around',
              }}
            >
              <Box w={'90%'}>
                <TextInput
                  readOnly
                  variant="unstyled"
                  type="text"
                  size="xs"
                  label={`${item.reasonName} - ${item.timeTypeName}`}
                  w={'100%'}
                  value={item.note}
                />
              </Box>
              <Box
                className={classes.optionIcon}
                style={{ alignItems: 'center' }}
              >
                <IconTrash
                  className={classes.deleteIcon}
                  onClick={() => openDeleteConfirm(item)}
                  width={20}
                  height={20}
                />
              </Box>
            </Box>
          )
        })}
      </Drawer>
      <Box display={'flex'}>
        <Box style={{ display: 'flex', flexFlow: 'column' }} w={'30%'}>
          <Box w="100%" display={'flex'}>
            <Select
              w="50%"
              value={date.month}
              size="xs"
              label="Month"
              data={Array.from({ length: 12 }, (_, index) => {
                return {
                  value: (1 + index).toString(),
                  label: (1 + index).toString(),
                }
              })}
              onChange={(e) => {
                setDate({ ...date, month: e! })
              }}
            ></Select>
            <Select
              w="50%"
              value={date.year}
              size="xs"
              ml={'sm'}
              label="Year"
              data={Array.from({ length: 10 }, (_, index) => {
                return {
                  value: (
                    parseInt(moment(Date.now()).format('YYYY')) -
                    3 +
                    index
                  ).toString(),
                  label: (
                    parseInt(moment(Date.now()).format('YYYY')) -
                    3 +
                    index
                  ).toString(),
                  disabled:
                    parseInt(moment(Date.now()).format('YYYY')) - 3 + index >
                    parseInt(moment(Date.now()).format('YYYY')),
                }
              })}
              onChange={(e) => {
                setDate({ ...date, year: e! })
              }}
            ></Select>
          </Box>
          <Box display={'flex'} style={{ alignItems: 'end' }}>
            <TextInput
              type="number"
              size="xs"
              label="Working days"
              w={'20%'}
              value={workingDays}
              onChange={(e) => {
                setWorkingDays(parseFloat(e.target.value))
              }}
            />
            <Tooltip label="Save working days">
              <Button
                size="xs"
                ml={'sm'}
                onClick={() => handleUpdateWorkingDays()}
              >
                Save
              </Button>
            </Tooltip>
            <Button
              onClick={() => setExportModalOpened(true)}
              size="xs"
              ml="md"
              bg={'green'}
              leftSection={<IconFileExcel size={16} />}
            >
              Export
            </Button>
          </Box>
        </Box>
        <Box
          w="70%"
          pl={200}
          style={{
            display: 'flex',
            alignItems: 'end',
            justifyContent: 'space-evenly',
          }}
        >
          <Box style={{ display: 'flex', alignItems: 'center' }}>
            <IconCheck
              size={20}
              style={{
                backgroundColor: 'green',
                color: 'white',
                borderRadius: '5px',
                padding: '2px',
                fontWeight: 700,
              }}
            />
            <Text ml={'sm'} fz="14px">
              Work over 7 hours
            </Text>
          </Box>
          <Box style={{ display: 'flex', alignItems: 'center' }}>
            <IconCheck
              size={20}
              style={{
                backgroundColor: 'orange',
                color: 'white',
                borderRadius: '5px',
                padding: '2px',
                fontWeight: 700,
              }}
            />
            <Text ml={'sm'} fz="14px">
              Work over 3.5 hours
            </Text>
          </Box>
          <Box style={{ display: 'flex', alignItems: 'center' }}>
            <IconExclamationMark
              size={20}
              style={{
                backgroundColor: 'orange',
                color: 'white',
                borderRadius: '5px',
                padding: '2px',
                fontWeight: 700,
              }}
            />
            <Text ml={'sm'} fz="14px">
              Checked in
            </Text>
          </Box>
          <Box style={{ display: 'flex', alignItems: 'center' }}>
            <IconX
              size={20}
              style={{
                backgroundColor: '#ff4646',
                color: 'white',
                borderRadius: '5px',
                padding: '2px',
                fontWeight: 700,
              }}
            />
            <Text ml={'sm'} fz="14px">
              Off
            </Text>
          </Box>
        </Box>
      </Box>
      <Box>
        <Table
          striped
          highlightOnHover
          withTableBorder
          withColumnBorders
          mt={'md'}
        >
          <Table.Thead>
            <Table.Tr bg={'#228be66b'}>
              <Table.Th>Day</Table.Th>
              <Table.Th></Table.Th>
              <Table.Th></Table.Th>
              {daysInMonth.map((d) => {
                return (
                  <Menu width={200} shadow="md" key={d}>
                    <Menu.Target>
                      <Table.Th
                        key={d}
                        ta={'center'}
                        style={{ cursor: 'pointer' }}
                      >
                        <span>{d}</span>
                      </Table.Th>
                    </Menu.Target>

                    <Menu.Dropdown>
                      <Menu.Item
                        onClick={() =>
                          updateMultipleUser(
                            data.map((u) => u.user.id),
                            d,
                            'half',
                          )
                        }
                      >
                        + Add half a day's work
                      </Menu.Item>
                      <Menu.Item
                        onClick={() =>
                          updateMultipleUser(
                            data.map((u) => u.user.id),
                            d,
                            'one',
                          )
                        }
                      >
                        + Add 1 day of work
                      </Menu.Item>
                      <Menu.Item>
                        <Text
                          size="sm"
                          onClick={() => {
                            open1()
                            setCustomAddData({ ...customAddData, day: d })
                          }}
                        >
                          + Add custom worklog
                        </Text>
                      </Menu.Item>
                    </Menu.Dropdown>
                  </Menu>
                )
              })}
            </Table.Tr>
            <Table.Tr bg={'#228be66b'}>
              <Table.Th></Table.Th>
              <Table.Th ta={'center'}>Total</Table.Th>
              <Table.Th ta={'center'}>Off</Table.Th>
              {daysInMonth.map((d) => {
                return (
                  <Table.Th
                    key={d}
                    ta={'center'}
                    bg={
                      getDayName(`${date.year}-${date.month}-${d}`) === 'Su' ||
                      getDayName(`${date.year}-${date.month}-${d}`) === 'Sa'
                        ? 'rgb(251 255 196 / 78%)'
                        : ''
                    }
                  >
                    {getDayName(`${date.year}-${date.month}-${d}`)}
                  </Table.Th>
                )
              })}
            </Table.Tr>
          </Table.Thead>
          <Table.Tbody>
            {data.map((user) => {
              let totalDays =
                user.history.filter((h) => h.total / 60 / 60 >= 7).length +
                user.history.filter(
                  (h) => h.total / 60 / 60 < 7 && h.total / 60 / 60 >= 3.5,
                ).length /
                  2
              return (
                <Table.Tr key={user.user.id} className={classes.tableTr}>
                  <Table.Td>
                    <Tooltip
                      // position={'auto'}
                      multiline
                      // opened
                      // offset={{ mainAxis: 5, crossAxis: 0 }}
                      label={showTooltipAllNote(user)}
                    >
                      <div style={{ display: 'flex', alignItems: 'center' }}>
                        <Avatar
                          size={'md'}
                          mr={'md'}
                          src={
                            import.meta.env.VITE_BACKEND_URL.includes('local')
                              ? import.meta.env.VITE_BACKEND_URL +
                                'storage/' +
                                user.user.avatar
                              : import.meta.env.VITE_BACKEND_URL +
                                'image/storage/' +
                                user.user.avatar
                          }
                        />
                        {user.user.name}
                      </div>
                    </Tooltip>
                  </Table.Td>
                  <Table.Td ta={'center'}>{totalDays}</Table.Td>
                  <Table.Td ta={'center'}>{workingDays - totalDays}</Table.Td>
                  {daysInMonth.map((d) => {
                    var total =
                      user.history.find((h) => h.day === d)?.total ?? 0
                    var notes = user.history.find((h) => h.day === d)?.notes
                    return (
                      <Table.Td
                        pos={'relative'}
                        key={d}
                        ta={'center'}
                        bg={
                          getDayName(`${date.year}-${date.month}-${d}`) ===
                            'Su' ||
                          getDayName(`${date.year}-${date.month}-${d}`) === 'Sa'
                            ? 'rgb(251 255 196 / 78%)'
                            : ''
                        }
                      >
                        <Box
                          pos={'absolute'}
                          top={-3}
                          right={-3}
                          display={notes && notes.length > 0 ? 'block' : 'none'}
                        >
                          <IconPointFilled
                            width={15}
                            height={15}
                            style={{ color: '#2767e1' }}
                          />
                        </Box>
                        {total / 60 / 60 < 7 &&
                        user.history.find(
                          (h) => h.day === d && h.values && h.values.length > 0,
                        ) ? (
                          total / 60 / 60 >= 3.5 ? (
                            <Tooltip
                              multiline
                              label={showTooltip(user, total, d)}
                            >
                              <IconCheck
                                size={20}
                                style={{
                                  backgroundColor: 'orange',
                                  color: 'white',
                                  borderRadius: '5px',
                                  padding: '2px',
                                  fontWeight: 700,
                                }}
                                onClick={() => {
                                  handleOpenNote(user, d)
                                }}
                              />
                            </Tooltip>
                          ) : (
                            <Tooltip
                              multiline
                              label={showTooltip(user, total, d)}
                            >
                              <IconExclamationMark
                                size={20}
                                style={{
                                  backgroundColor: 'orange',
                                  color: 'white',
                                  borderRadius: '5px',
                                  padding: '2px',
                                  fontWeight: 700,
                                }}
                                onClick={() => {
                                  handleOpenNote(user, d)
                                }}
                              />
                            </Tooltip>
                          )
                        ) : total >= 7 ? (
                          <>
                            <Tooltip
                              multiline
                              label={showTooltip(user, total, d)}
                            >
                              <IconCheck
                                size={20}
                                style={{
                                  backgroundColor: 'green',
                                  color: 'white',
                                  borderRadius: '5px',
                                  padding: '2px',
                                }}
                                onClick={() => {
                                  handleOpenNote(user, d)
                                }}
                              />
                            </Tooltip>
                          </>
                        ) : (
                          <>
                            {user.history.find(
                              (h) =>
                                h.day === d && h.notes && h.notes.length > 0,
                            ) ? (
                              <Tooltip
                                multiline
                                label={showTooltipNote(user, d)}
                              >
                                <IconX
                                  size={20}
                                  style={{
                                    backgroundColor: '#ff4646',
                                    color: 'white',
                                    borderRadius: '5px',
                                    padding: '2px',
                                  }}
                                  id={`indexBySN${user.user.id}_${d}`}
                                  onClick={() => {
                                    handleOpenNote(user, d)
                                  }}
                                />
                              </Tooltip>
                            ) : (
                              <IconX
                                size={20}
                                style={{
                                  backgroundColor: '#ff4646',
                                  color: 'white',
                                  borderRadius: '5px',
                                  padding: '2px',
                                }}
                                id={`indexBySN${user.user.id}_${d}`}
                                onClick={() => {
                                  handleOpenNote(user, d)
                                }}
                              />
                            )}
                          </>
                        )}
                      </Table.Td>
                    )
                  })}
                </Table.Tr>
              )
            })}
          </Table.Tbody>
        </Table>
      </Box>
      <Modal
        opened={exportModalOpened}
        onClose={() => setExportModalOpened(false)}
        title={
          <Text pl={'sm'} fw={700} fz={'lg'}>
            Export
          </Text>
        }
        size="sm"
      >
        <Select
          label="Option"
          placeholder="Choose an option"
          value={exportOption}
          onChange={(value) => setExportOption(value || 'default')}
          data={[{ value: 'default', label: 'Default' }]}
          mb="md"
        />
        <Box
          style={{ display: 'flex', justifyContent: 'flex-end', gap: '10px' }}
        >
          <Button variant="outline" onClick={() => setExportModalOpened(false)}>
            Close
          </Button>
          <Button onClick={() => handleExport(exportOption)}>Export</Button>
        </Box>
      </Modal>
      <DeleteConfirmModal />
    </div>
  )
}

export default Timekeeping