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

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

export const UserPage = () => {
  const [socketId, setSocketId] = useState(null);
  const [error, setError] = useState(null);
  const { lessonId } = useParams();
  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') || '');
  const handleChange = useCallback(event => {
    setValue(event.target.value.toUpperCase())
  }, [setValue]);

  const handleSubmit = useCallback((event) => {
    event.preventDefault();

    localStorage.setItem('name', value)
    // socket.emit('add', { socketId: localStorage.getItem('socketId') || socketId, name: value, lessonid: lessonId });
  }, [value])

  return (
    <MainWrapper>
      <StartWrapper>
        <form onSubmit={handleSubmit}>
          <InputWrapper>
            <InputLabel
              htmlFor='input'
            >
              Как вас зовут:
            </InputLabel>
            <InputElement
              value={value}
              onChange={handleChange}
              id="input"
              type="text"
              autoComplete="off"
            />
            <IconButton type="submit">
              <ArrowImg src={arrow} />
            </IconButton>
          </InputWrapper>
        </form>
      </StartWrapper>
    </MainWrapper>
  )
}