import React, {useState, useCallback, useRef} from 'react';
import { getFeatures } from '@ijl/cli';

import logo from '../assets/logo-white.svg';
import arrow from '../assets/36-arrow-right.svg';

import { Keyboard } from '../components/keyboard';

import {
    MainWrapper,
    InputElement,
    InputLabel,
    InputWrapper,
    LogoImg,
    ArrowImg,
    IconButton,
    StartWrapper,
    StartI,
    StartInput,
    StartLabel,
} from './style';
import {socket} from "../socket";

const keyboardFeature = getFeatures('hub-video-start')?.keyboard;

const Input = ({ onStart }) => {
    const [value, setValue] = useState('');
    const [inFocuse, setInfocuse] = useState(false);
    const handleChange = useCallback(event => {
        setValue(event.target.value.toUpperCase())
    }, [setValue]);

    const handleSubmit = useCallback((event) => {
        event.preventDefault();
        if (value === 'SBER') {
            onStart()
        }
    }, [value])

    return (
        <>
            <form onSubmit={handleSubmit}>
                <InputWrapper>
                    <InputLabel
                        htmlFor='input'
                    >
                        Ввод:
                    </InputLabel>
                    <InputElement
                        value={value}
                        onChange={handleChange}
                        onFocus={() => setInfocuse(true)}
                        id="input"
                        autoComplete="off"
                    />
                    <IconButton type="submit">
                        <ArrowImg src={arrow} />
                    </IconButton>
                </InputWrapper>
            </form>
            {keyboardFeature && inFocuse && (
                <Keyboard onChange={setValue} />
            )}
        </>
    )
}

const Start = () => {
    const socketRef = useRef({ sent: false })

    const handleCheck = () => {
        if (!socketRef.current.sent) {
            socket.emit('play')
            socketRef.current.sent = true
        }
    }

    return (
        <StartWrapper>
            <StartInput
                id="check"
                type="checkbox"
                onChange={handleCheck}
            />
            <StartLabel
                htmlFor='check'
            >
                <StartI>СТАРТ</StartI>
            </StartLabel>
        </StartWrapper>
    )
}

export const MainPage = () => {
    const [showStart, setShowStart] = useState(false);

    return (
        <MainWrapper>
            <LogoImg src={logo} />
            {!showStart && <Input onStart={() => setShowStart(true)} />}
            {showStart && <Start />}
        </MainWrapper>
    );
};