import { getAllIssuesByProject, getAllProjects } from '@/api/Admin'
import { TableOfContentsFloating } from '@/components/TableOfContentsFloating/TableOfContentsFloating'
import { get } from '@/rtk/helpers/apiService'
import { Box, Loader, Text } from '@mantine/core'
import { useEffect, useState } from 'react'
import classes from './Jira.module.css'
type TProject = {
  id: string
  name: string
  key: string
  avatarUrls: {
    '48x48': string
    '24x24': string
    '16x16': string
    '32x32': string
  }
}

type TIssue = {
  summary: string
  desc: string | null
  assignee: string | null
  status: string
  worklogs: any[]
  originalEstimate: number | null
  timeSpent: number | null
}
const Jira = () => {
  const [loader, setLoader] = useState(true)
  const [issuesInProject, setIssuesInProject] = useState<TIssue[]>([])
  const [listProject, setListProject] = useState<TProject[]>([])
  const [listStatus, setListStatus] = useState<string[]>([])
  const [currentProject, setCurrentProject] = useState<string>('Summary')

  const getUniqueStatuses = (issues: TIssue[]) => {
    const statuses = issues.map((issue) => issue.status)
    const uniqueStatuses = [...new Set(statuses)]
    return uniqueStatuses
  }

  const getAllIssuesInProject = async (key: string, name: string) => {
    try {
      if (name !== 'Summary') {
        const res = await get(getAllIssuesByProject, { key: key, name: name })
        if (res.status) {
          var statusArray:string[] = getUniqueStatuses(res.data[0].issues)
          setListStatus(statusArray)
          setIssuesInProject(res.data[0].issues)
        }
      }
    } catch (error) {
      console.log(error)
    }
  }

  const getAllProject = async () => {
    try {
      const res = await get(getAllProjects)
      if (res.status) {
        var list: TProject[] = [
          {
            id: '',
            name: 'Summary',
            key: '',
            avatarUrls: {
              '48x48': '',
              '24x24': '',
              '16x16': '',
              '32x32': '',
            },
          },
        ]
        setListProject(list.concat(res.data))
        setLoader(false)
      }
    } catch (error) {
      console.log(error)
    }
  }

  console.log(listStatus)
  useEffect(() => {
    getAllProject()
  }, [])

  useEffect(() => {
    getAllIssuesInProject(
      listProject.find((p) => p.name === currentProject)?.key!,
      currentProject,
    )
  }, [currentProject])
  return loader ? (
    <Box ta={'center'}>
      <Loader size={40} mt={'15%'} />
    </Box>
  ) : (
    <div>
      <div className={classes.title}>
        <h3>
          <Text>Admin/</Text>Jira
        </h3>
      </div>
      <Box display={'flex'}>
        <Box w={'20%'} p={'md'}>
          <Text fw={700} mb={'md'}>
            Projects
          </Text>
          <Box
            h={'70vh'}
            style={{
              display: 'flex',
              flexFlow: 'column',
              maxHeight: '70vh',
              overflow: 'auto',
              paddingLeft: '20px',
            }}
          >
            <TableOfContentsFloating
              links={listProject.map((p) => {
                return {
                  label: p.name,
                  link: '#',
                  order: 1,
                  avartar: p.avatarUrls['16x16'],
                  key: p.key,
                }
              })}
              setCurrentProject={setCurrentProject}
              defaultActive={0}
            />
          </Box>
        </Box>
        <Box w={'80%'} h={'100vh'} display={"flex"} style={{overflowX:"auto"}}>
          {
            listStatus?.map((sta)=>(
                <Box p={'sm'} style={{border:"solid 1px gray"}}>
                    <Text ta={'center'} style={{border:"solid 1px gray", borderRadius:"8px"}} mb={"md"} fw={600}>{sta}</Text>
                    <Box style={{maxHeight:"90vh", overflowX:"hidden"}}>
                        {
                             issuesInProject.filter((iss)=>iss.status === sta)?.map((iss) => (
                                <Text w={"200px"}  fz={15} style={{border:"solid 1px gray", padding:"4px", marginBottom:"5px"}}>{iss.summary}</Text>
                              ))
                        }
                    </Box>
                </Box>
            ))
          }
        </Box>
      </Box>
    </div>
  )
}

export default Jira
