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

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

import {
    MainWrapper,
    InputElement,
    InputLabel,
    InputWrapper,
    ArrowImg,
    IconButton,
} from './style';
import { Journal } from './Journal';

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

    useEffect(() => {
      const pass = localStorage.getItem('pass')

      if (pass) {
        onStart();
      }
    }, []);

    const handleSubmit = useCallback((event) => {
        event.preventDefault();
        localStorage.setItem('pass', 'true')
        if (value === 'OYB0Y') {
            onStart()
        }
    }, [value])

    return (
        <>
            <form onSubmit={handleSubmit}>
                <InputWrapper>
                    <InputLabel
                        htmlFor='input'
                    >
                        Введите пароль:
                    </InputLabel>
                    <InputElement
                        value={value}
                        onChange={handleChange}
                        onFocus={() => setInfocuse(true)}
                        ref={inputRef}
                        id="input"
                        type="password"
                        autoComplete="off"
                    />
                    <IconButton type="submit">
                        <ArrowImg src={arrow} />
                    </IconButton>
                </InputWrapper>
            </form>
        </>
    )
}

export const MainPage = () => {
    const [shoList, setShoList] = useState(false);

    return (
        <MainWrapper>
            {!shoList && <Input onStart={() => setShoList(true)} />}
            {shoList && <Journal />}
        </MainWrapper>
    );
};