import Grid from '@mui/material/Grid';
import { Button, Box, Switch } from '../../components/UI';
import React, { useState } from 'react'

interface Props {
    children?: React.ReactNode;
    onClick: () => void;
    disable: boolean;
  }

  let scores_nay = 0;

  

export const Estimation: React.FC<Props> = ({children, onClick, disable}) => {
    const [counter, setCounter] = useState(0);
  const [butStartnDisable, setButStartnDisable] = useState(false);
  const [butWriteDisable, setButWriteDisable] = useState(true);
  const [switchDisable, setSwitchDisable] = useState(true);
  const [scores, setScores] = useState(0);
  const [start, setStart] = useState(false);
  const [buttonText, setButtonText] = useState('СТАРТ');
  const [data, setData] = useState({switchstart: false, switchwasher_1: false, switchwasher_2: false, switchwasher_3: false, switchwasher_4: false, switchfinish: false});
  
  React.useEffect(() => {
    const timer =
      ( counter < 60 ) && start && setInterval(() => setCounter(counter + 1), 1000);
    return () => clearInterval(timer);
  }, [counter, start]);
 
  const fnStart = () => {
    setStart(start ? false : true);
    setButtonText(start ? 'СТАРТ':'СТОП');
    console.log(start);
    setButStartnDisable(start ? true : false);
    setSwitchDisable(false);
    setButWriteDisable(false);
  }


  const fnWrite = () => {
    console.log(scores);
  }

  const updateData = (e: any) => {
    setData({
      ...data, [e.target.id]: e.target.checked
    });
    scores_nay = e.target.checked ? scores_nay+parseInt(e.target.value): scores_nay-parseInt(e.target.value);
    setScores(e.target.checked ? scores+parseInt(e.target.value): scores-parseInt(e.target.value))

    if (scores_nay === 50) {
      setScores(scores_nay+(60-counter));
    }
  }
    return(
        <Grid container rowSpacing={1} columnSpacing={{ xs: 12, sm: 2, md: 2 }}>
          <Grid item xs={12} sm={2} md={6}>
            <Box> 
              <div className='taskBox'> 
                  <p className='taskTitle'>Команда: Имя</p>
              </div>
              <div className='taskBox'> 
                  <p className='taskTitle'>Время: {counter} сек</p>
                  <p className='taskTitle'>Баллы: {scores} </p>
              </div>

                <div className='taskBox'> 
                  <p className='taskTitle'>Выезд из зоны старта</p>
                  <Switch 
                    isOn={data.switchstart}
                    value={5}
                    disable={switchDisable}
                    name={'start'}
                    onColor="#EF476F"
                    handleToggle={(e) => updateData(e)}>
                  </Switch>
                </div>
                <div className='taskBox'> 
                  <p className='taskTitle'>Первая щайба</p>
                  <Switch 
                    isOn={data.switchwasher_1}
                    name={'washer_1'}
                    value={10}
                    disable={switchDisable}
                    onColor="#EF476F"
                    handleToggle={(e) => updateData(e)}>
                  </Switch>
                </div>
                <div className='taskBox'> 
                  <p className='taskTitle'>Вторая шайба</p>
                  <Switch 
                   isOn={data.switchwasher_2}
                   name={'washer_2'}
                   value={10}
                   disable={switchDisable}
                   onColor="#EF476F"
                   handleToggle={(e) => updateData(e)}>
                  </Switch>
                </div>
                <div className='taskBox'> 
                  <p className='taskTitle'>Третья шайба</p>
                  <Switch 
                   isOn={data.switchwasher_3}
                   name={'washer_3'}
                   value={10}
                   disable={switchDisable}
                   onColor="#EF476F"
                   handleToggle={(e) => updateData(e)}>
                  </Switch>
                </div>
                <div className='taskBox'> 
                  <p className='taskTitle'>Четвертая шайба</p>
                  <Switch 
                    isOn={data.switchwasher_4}
                    name={'washer_4'}
                    value={10}
                    disable={switchDisable}
                    onColor="#EF476F"
                    handleToggle={(e) => updateData(e)}>
                  </Switch>
                </div>
                <div className='taskBox'> 
                  <p className='taskTitle'>Заезд в зону финиша</p>
                  <Switch 
                    isOn={data.switchfinish}
                    name={'finish'}
                    value={5}
                    disable={switchDisable}
                    onColor="#EF476F"
                    handleToggle={(e) => updateData(e)}>
                  </Switch>
                </div>
                <div className='boxButton'>
                  <Button onClick={()=> fnStart()} disable={butStartnDisable}>{buttonText}</Button>
                  <Button onClick={()=> fnWrite()} disable={butWriteDisable}>Подтверждаю результат</Button>
                </div>
            </Box>
          </Grid>
        </Grid>
    )
}