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

import { connect, getSocket } from '../socket';
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(() => {
    connect();
    const socket = getSocket();
    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();

    const socket = getSocket();
    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>
  )
}