import React from 'react'
import { useParams } from 'react-router-dom'

import {
  ErrorSpan,
  LessonItem,
  Lessonname,
  MainWrapper,
  StartWrapper,
} from './style'
import { api } from '../__data__/api/api'
import dayjs from 'dayjs'

const UserPage = () => {
  const { lessonId, accessId } = useParams()
  const acc = api.useGetAccessQuery({ accessCode: accessId })

  const ls = api.useLessonByIdQuery(lessonId, {
    pollingInterval: 1000,
    skipPollingIfUnfocused: true,
  })

  return (
    <MainWrapper>
      <StartWrapper>
        {acc.isLoading && <h1>Отправляем запрос</h1>}
        {acc.isSuccess && <h1>Успешно</h1>}

        {acc.error && (
          <div style={{ padding: 12, marginTop: 24, fontSize: 36 }}>
            <ErrorSpan>
              {(acc as any).error?.data?.body?.errorMessage ===
              'Code is expired' ? (
                'Не удалось активировать код доступа. Попробуйте отсканировать код ещё раз'
              ) : (
                <pre>{JSON.stringify(acc.error, null, 4)}</pre>
              )}
            </ErrorSpan>
          </div>
        )}
        <h1>Тема занятия - {ls.data?.body?.name}</h1>
        <span>{dayjs(ls.data?.body?.date).format('DD MMMM YYYYг.')}</span>

        <ul style={{ paddingLeft: 0 }}>
          {ls.data?.body?.students?.map((student, index) => (
            <LessonItem key={index}>
              <Lessonname>
                {student.name || student.preferred_username}
              </Lessonname>
            </LessonItem>
          ))}
        </ul>
      </StartWrapper>
    </MainWrapper>
  )
}

export default UserPage