import React, { useCallback, useMemo } from "react";
import { useDispatch, useSelector } from "react-redux";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import RadioItem from '@enact/sandstone/RadioItem';
import css from "./DebugPanel.module.less";
import TPanel from "../../components/TPanel/TPanel";
import THeader from "../../components/THeader/THeader";
import appinfo from '../../../webos-meta/appinfo.json';
import TScroller from "../../components/TScroller/TScroller";
import { changeLocalSettings } from "../../actions/commonActions";

const Container = SpotlightContainerDecorator({ enterTo: "last-focused" }, "div");

export default function DebugPanel() {
  const dispatch = useDispatch();
  const appStatus = useSelector((state) => state.common.appStatus);
  const httpHeader = useSelector((state) => state.common.httpHeader);
  const localSettings = useSelector((state) => state.localSettings);
  const infos = useMemo(() => {
		let v = [];
		v.push({title: 'Version(App)', value: appinfo.version});
		v.push({title: 'WebOS', value: appStatus.webOSVersion+"("+httpHeader?.os_ver+")"});
		v.push({title: ' ', value: ' '});
		return v;
	}, [appStatus, httpHeader]);

  const onChangeServer = useCallback((type) => () => {
    if(type === localSettings.serverType){
      return;
    }else{
		  dispatch(changeLocalSettings({ serverType: type, ricCodeSetting: 'system' }));
    }
	}, [dispatch, localSettings]);

  const onChangeServerRic = useCallback((type) => () => {
	  dispatch(changeLocalSettings({ ricCodeSetting: type }));
		if(typeof window === 'object'){
			window.location.reload();
		}
	}, [dispatch, localSettings]);

  const disabledRic = useMemo(()=>{
    return false;//localSettings.serverType !== 'prd';
  },[localSettings]);

  return <TPanel isTabActivated={false}>
      <THeader title="Debug"/>
      {infos.map((item, index) =>
        {return(
          <div className={css.titleArea} key={"info"+index}>
            <div className={css.titleBox}>
              <div className={css.text}>{item.title}</div>
            </div>
            <div className={css.textArea}>
              <div className={css.text}>{item.value}</div>
            </div>
          </div>
        )
        }
      )}
      <TScroller className={css.scroller}>
        <Container className={css.settingLayer}>
          <Container className={css.titleArea}>
            <div className={css.switchs}>
              <span className={css.switchTitle}>{'Server'}</span>
              <RadioItem	className={css.switch} selected={localSettings.serverType === 'system'} onClick={onChangeServer('system')}>system</RadioItem>
              <RadioItem	className={css.switch} selected={localSettings.serverType === 'qt2'} onClick={onChangeServer('qt2')}>qt2(qt3)</RadioItem>
              <RadioItem	className={css.switch} selected={localSettings.serverType === 'qt'} onClick={onChangeServer('qt')}>qt</RadioItem>
              <RadioItem	className={css.switch} selected={localSettings.serverType === 'prd'} onClick={onChangeServer('prd')}>prd</RadioItem>
              </div>
            </Container>
          <Container className={css.titleArea}>
            <div className={css.switchs}>
              <span className={css.switchTitle}>{'RicCode(Reboot)'}</span>
              <RadioItem	className={css.switch} disabled={disabledRic} selected={localSettings.ricCodeSetting === 'system'} onClick={onChangeServerRic('system')}>system</RadioItem>
              <RadioItem	className={css.switch} disabled={disabledRic} selected={localSettings.ricCodeSetting === 'aic'} onClick={onChangeServerRic('aic')}>aic</RadioItem>
              <RadioItem	className={css.switch} disabled={disabledRic} selected={localSettings.ricCodeSetting === 'eic'} onClick={onChangeServerRic('eic')}>eic</RadioItem>
              <RadioItem	className={css.switch} disabled={disabledRic} selected={localSettings.ricCodeSetting === 'ruc'} onClick={onChangeServerRic('ruc')}>ruc</RadioItem>
            </div>
          </Container>
        </Container>
      </TScroller>
    </TPanel>;
}
