import React, { useEffect, useContext, useState, useRef } from 'react';
import SectionHeader from '../../elements/SectionHeader/SectionHeader';
import IconButton from '../../elements/IconButton/IconButton';
import { ConfigContext } from '../../contexts/ConfigContext/ConfigContext';
import { setTestLineCss, setResolutionCss, setInterlineCss, clearAllMedias, fitToScreen, changeDisplayLines } from './functions';
import { SettingsBox, ResolutionButtons, ResolutionSingleButton, SettingRow, SettingText, SettingLabel, CloseButton, VersionText } from './Settings.css';
import { Toggle } from "react-toggle-component";
import NumericInput from 'react-numeric-input';

const Settings = ():JSX.Element => {  
  const { config, setConfig } = useContext(ConfigContext);
  const [powerOff, setPowerOff] = useState(false);
  const [hidden, setHidden] = useState(false);
  const powerOffRef = useRef(powerOff);

  const setPowerOffRef = (_powerOff: boolean) => {
    powerOffRef.current = _powerOff;
    setPowerOff(_powerOff);
  }

  useEffect(() => {
    setTimeout(() => {
      console.log(screen);
      window.init(config.width, config.height, config.rows, config.columns);
      setResolution(config.width, config.height, config.interline);
      fitToScreen(screen.width, screen.height, config.width, config.height, config.rows, config.columns);
      changeDisplayLines(config.displayColumns, config.rows, config.columns);
    }, 1000)
  }, [window.init]);

  const setResolution = (width: number, height: number, interline: number) => {
    const newConfig = {...config, width, height, interline};
    setConfig(newConfig);
    setInterlineCss(newConfig.interline);
    setResolutionCss(width, height, config.displayColumns, interline);
    fitToScreen(screen.width, screen.height, width, height, config.rows, config.columns);
  }

  const handleChangeTestLine = (mode: string) => {
    const newConfig = {...config, testLine: !config.testLine};
    setTestLineCss(newConfig.testLine);
    setConfig(newConfig);
  }

  const handleChangeTwoPlaylists = () => {
    const newConfig = {...config, twoPlaylists: !config.twoPlaylists};
    setConfig(newConfig);
  }

  const handleChangeInterline = (value: number) => {
    const newConfig = {...config, interline: value};
    setInterlineCss(newConfig.interline);
    setConfig(newConfig);
    setResolutionCss(config.width, config.height, config.displayColumns, value);
  }

  const closeApp = () => {
    require('electron').remote.app.quit();
  }

  const handlePowerOff = () => {
    setPowerOffRef(!powerOff);
  }

  const handleChangeLines = (value: number) => {
    changeDisplayLines(value, config.rows, config.columns);
    setResolutionCss(config.width, config.height, value, config.interline);
    setConfig({...config, displayColumns: value});
  }

  const handleToggleHideSettings = () => {
    setHidden(!hidden);
  }

  if (hidden) {
    return (
      <div>
        <IconButton title="Wyczyść ramki" icon="arrow-right" bgColor='red' onClick={handleToggleHideSettings} />
      </div>
    )
  }

  return (
    <SettingsBox>

      <div style={{display: 'flex', flexDirection: 'row'}}>
        <div>
          <IconButton title="Schowaj ustawienia" icon="arrow-left" bgColor='red' onClick={handleToggleHideSettings} />
        </div>
        <SectionHeader title="Ustawienia" />
      </div>
      <div style={{display: 'flex', height: 'calc(100% - 33px)', flexDirection: 'column', justifyContent: 'flex-end'}}>
        <ResolutionButtons>
          <ResolutionSingleButton active={config.width === 128 && config.height === 48} onClick={() => setResolution(128,48, 16)}>128x48px</ResolutionSingleButton>
          <ResolutionSingleButton active={config.width === 128 && config.height === 56} onClick={() => setResolution(128,56, 8)}>128x56px</ResolutionSingleButton>
          <ResolutionSingleButton active={config.width === 192 && config.height === 80} onClick={() => setResolution(192,80, 8)}>192x80px</ResolutionSingleButton>
        </ResolutionButtons>

        <SettingRow>
          <SettingLabel>
            <SettingText>
             Wyczyść ramki
            </SettingText>
            <IconButton title="Wyczyść ramki" icon="trash" bgColor='red' onClick={() => clearAllMedias(config.rows, config.columns)} />
          </SettingLabel>
        </SettingRow>

        <SettingRow>
          <SettingLabel>
            <SettingText>Interlinia:</SettingText>
            <NumericInput style={{input: {width:50, fontSize: 13}}} value={config.interline} min={0} max={16} onChange={handleChangeInterline} />
          </SettingLabel>
        </SettingRow>

        <SettingRow>
          <SettingLabel>
            <SettingText>Ilość linii:</SettingText>
            <NumericInput style={{input: {width:50, fontSize: 13}}} value={config.displayColumns} min={1} max={8} onChange={handleChangeLines} />
          </SettingLabel>
        </SettingRow>

        <SettingRow>
          <SettingLabel>
            <SettingText>Linia testowa</SettingText>
            <Toggle name="testLine-toggle" onToggle={(e: {target: string}) => handleChangeTestLine(e.target)} />
          </SettingLabel>
        </SettingRow>

        <SettingRow>
          <SettingLabel>
            <SettingText>2 Playlisty</SettingText>
            <Toggle name="twoPlaylists-toggle" onToggle={(e: {target: string}) => handleChangeTwoPlaylists()} />
          </SettingLabel>
        </SettingRow>

        <SettingRow style={{display:'flex'}}>
          <IconButton title="Zamknij program" icon="power-off" bgColor='red' onClick={() => handlePowerOff()} customStyle={{position: 'relative', zIndex: 1}} />
          {
            powerOff 
              &&
                <CloseButton onClick={closeApp}>Zamknij</CloseButton> 
          }
        </SettingRow>
        <VersionText>v1.0.0</VersionText>
      </div>
    </SettingsBox>
  )
};

export default Settings;