import React, { useState, useCallback } from 'react';

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

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

const Input = ({ onStart }) => {
    const [value, setValue] = useState('');
    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}
                    id="input"
                    autoComplete="off"
                />
                <IconButton type="submit">
                    <ArrowImg src={arrow} />
                </IconButton>
            </InputWrapper>
        </form>
    )
}

const Start = () => {
    return (
        <StartWrapper>
            <StartInput
                id="check"
                type="checkbox"
            />
            <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>
    );
};