import './settings.scss';

import React from 'react';
import { toast } from 'react-toastify';

import Input from '../../components/Input/input';
import Textarea from '../../components/Textarea';
import useLocalStorage from '../../hooks/useLocalStorage';
import * as logHelper from '../../utils/logHelper';
import Select from '../Select';
import Transition from '../Transition/transition';
import i18n from '../../i18n';

interface Props {
  visible: boolean;
}

const Settings: React.FC<Props> = (props) => {
  const { visible } = props;
  //const [fail, setFail] = useLocalStorage('fail-check', false);
  const [clientId, setClientId] = useLocalStorage<string>('clientId', '');
  const [logLevel, setLogLevel] = useLocalStorage('ppLogLevel', 'warn');
  const [location, setLocation] = useLocalStorage('location', {
    lat: '',
    long: '',
  });
  const [compassInfo, setCompassInfo] = useLocalStorage('compassInfo', {
    direction: '',
    accuracy: '',
  });
  const [appOptions, setAppOptions] = useLocalStorage('appLaunchOptions', '');
  const [language, setLanguage] = useLocalStorage('language', 'ja');

  function logLevelChange(value: any) {
    setLogLevel(value);
    logHelper.applyLogLevel();
  }
  function changeLanguage(e: any) {
    let value = e.target.value;
    setLanguage(value);
    value = value.toLowerCase();
    if (['ja', 'en'].indexOf(value) > -1) {
      i18n.changeLanguage(value);
    } else {
      i18n.changeLanguage('ja');
    }
  }
  function locationChange(eve: any, key: any) {
    setLocation({
      ...location,
      [key]: parseFloat(eve?.target?.value),
    });
  }
  function setCompassInfoChange(eve: any, key: any) {
    setCompassInfo({
      ...compassInfo,
      [key]: parseFloat(eve?.target?.value),
    });
  }
  function setAppLaunchOptions() {
    try {
      //let jsonValue = JSON.stringify(JSON.parse(appOptions));
      //setAppOptions(jsonValue);
      setAppOptions(appOptions);
    } catch {
      toast.error('Please enter a valid JSON.');
    }
  }
  return (
    <>
      <Transition in={visible} animation="zoom-in-top" timeout={300}>
        <div className="paypay-settings">
          {/*<Checkbox
            label="Fail all api calls"
            checked={fail}
            onChange={() => setFail(!fail)}
          ></Checkbox>*/}
          <span>Language</span>
          <div>
            <Input
              value={language}
              onChange={(e) => setLanguage(e.target.value)}
              onBlur={changeLanguage}
              placeholder="Language"
            />
          </div>
          <span>API Endpoint</span>
          <div>
            <Select defaultValue="Staging" theme="light">
              <Select.Option label="Staging" value="Staging" />
            </Select>
          </div>
          <span>Simulator Loglevel</span>
          <div>
            <Select
              onChange={logLevelChange}
              defaultValue={logLevel}
              theme="light"
            >
              {logHelper.ppLogLevel.map((option, i) => {
                return (
                  <Select.Option
                    label={option.label}
                    value={option.value}
                    key={`${option.value}${i}`}
                  />
                );
              })}
            </Select>
          </div>
          <span>Client ID</span>
          <Input
            value={clientId}
            required
            onChange={(e) => setClientId(e.target.value)}
            placeholder="Client ID"
          />
          <span>Location</span>
          <div className="location">
            <Input
              value={location.lat}
              type="number"
              onChange={(e) => locationChange(e, 'lat')}
              placeholder="Latitude"
            ></Input>
            <Input
              value={location.long}
              type="number"
              onChange={(e) => locationChange(e, 'long')}
              placeholder="Longitude"
            ></Input>
          </div>
          <span>Compass</span>
          <div className="compass-info">
            <Input
              value={compassInfo.direction}
              type="number"
              onChange={(e) => setCompassInfoChange(e, 'direction')}
              placeholder="Direction"
            ></Input>
            <Input
              value={compassInfo.accuracy}
              type="number"
              onChange={(e) => setCompassInfoChange(e, 'accuracy')}
              placeholder="Accuracy"
            ></Input>
          </div>
          <span>App Launch Options</span>
          <div>
            <Textarea
              className="app-launch-option"
              rows={5}
              value={appOptions}
              onChange={(e) => setAppOptions(e.target.value)}
              onBlur={setAppLaunchOptions}
              placeholder="App Launch Options"
            ></Textarea>
          </div>
        </div>
      </Transition>
    </>
  );
};

export default Settings;