import React, { useCallback, useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';

import { ArrowImg, IconButton, InputElement, InputLabel, InputWrapper, LessonItem, Lessonname, MainWrapper, StartWrapper } from './style';
import arrow from '../assets/36-arrow-right.svg';
import { api } from '../__data__/api/api';
import dayjs from 'dayjs';

export const UserPage = () => {
  const [socketId, setSocketId] = useState(null);
  const [error, setError] = useState(null);
  const { lessonId, accessId } = useParams();
  const acc = api.useGetAccessQuery({ accessCode: accessId })

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

  useEffect(() => {
    // socket.on('connect', () => {
    //   const id = localStorage.getItem('socketId');
    //   if (!id) {
    //     localStorage.setItem('socketId', socket.id);
    //     setSocketId(socket.id);
    //   } else {
    //     setSocketId(id);
    //   }

    //   const name = localStorage.getItem('name');
    //   if (name) {
    //     const socket = getSocket();
    //     socket.emit('add', { socketId: id || socket.id, name, lessonid: lessonId });
    //   }
    // })
    // socket.on('error', data => {
    //   setError(data)
    // })
  }, []);

  const [value, setValue] = useState(localStorage.getItem('name') || '');

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

        <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>
  )
}