import React, { useMemo } from 'react'
import { useParams } from 'react-router-dom'
import styled from '@emotion/styled'

import { api } from '../../__data__/api/api'
import { PageLoader } from '../../components/page-loader/page-loader'
import { Box, Container, Heading } from '@chakra-ui/react'
import dayjs from 'dayjs'

export const Attendance = () => {
  const { courseId } = useParams()
  const { data: attendance, isLoading } = api.useLessonListQuery(courseId, {
    selectFromResult: ({ data, isLoading }) => ({
      data: data?.body,
      isLoading,
    }),
  })
  const { data: courseInfo, isLoading: courseInfoIssLoading } =
    api.useGetCourseByIdQuery(courseId)

  const data = useMemo(() => {
    if (!attendance) return null

    const studentsMap = new Map()

    attendance.forEach((lesson) => {
      lesson.students.forEach((student) => {
        studentsMap.set(student.sub, {
          ...student,
          value:
            student.family_name && student.given_name
              ? `${student.family_name} ${student.given_name}`
              : student.name || student.email,
        })
      })
    })
    const compare = Intl.Collator('ru').compare

    const students = [...studentsMap.values()]
    students.sort(({ family_name: name }, { family_name: nname }) =>
      compare(name, nname),
    )
    return {
      students,
    }
  }, [attendance])

  if (!data || isLoading || courseInfoIssLoading) {
    return <PageLoader />
  }

  return (
    <Box>
      <Box mt={12} mb={12}>
        <Heading>{courseInfo.name}</Heading>
      </Box>
      <Box>
        <table>
          <thead>
            <tr>
              <th>Дата</th>
              <th>Название занятия</th>
              {data.students.map((student) => (
                <th key={student.sub}>{student.name}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {attendance.map((lesson, index) => (
              <tr key={lesson.name}>
                <td>{dayjs(lesson.date).format('DD.MM.YYYY')}</td>
                <td>{lesson.name}</td>
                {data.students.map((st) => {
                  const wasThere =
                    lesson.students.findIndex((u) => u.sub === st.sub) !== -1
                  return <td style={{
                    textAlign: 'center',
                    backgroundColor: wasThere ? '#8ef78a' : '#e09797',
                  }} key={st.sub}>{wasThere ? '+' : '-'}</td>
                })}
              </tr>
            ))}
          </tbody>
        </table>
      </Box>
    </Box>
  )
}