import React, { FC, Fragment, useMemo } from 'react';
import FeedbackButton from '../../components/FeedbackButton';
import ZoomUpButton from '../../components/ZoomUpButton';
import ZoomDownButton from '../../components/ZoomDownButton';
import ResetButton from '../../components/ResetButton';
import ExpandAllButton from '../../components/ExpandAllButton';
import themeFactory from '../../theme/themeFactory';
import { Theme } from '../../theme/types';

interface IProps {
  onFeedback: () => void;
  onZoomUp: () => void;
  onZoomDown: () => void;
  onReset: () => void;
  onExpandAll: () => void;
  scale: number;
}

const Controller: FC<IProps> = ({ onExpandAll, onZoomUp, onZoomDown, onReset, onFeedback, scale }) => {
  const themeConfig = useMemo(() => themeFactory.create(), []);
  return (
    <ul className="controller">
      {themeConfig.type === Theme.Teacher && (
        <>
          <li className="item">
            <FeedbackButton onClick={onFeedback}></FeedbackButton>
          </li>
          <div className="divide"></div>
          <li className="item">
            <ZoomUpButton scale={scale} onClick={onZoomUp}></ZoomUpButton>
          </li>
          <li className="item">
            <ZoomDownButton scale={scale} onClick={onZoomDown}></ZoomDownButton>
          </li>
          <div className="divide"></div>
          <li className="item">
            <ResetButton onClick={onReset}></ResetButton>
          </li>
          <li className="item">
            <ExpandAllButton onClick={onExpandAll}></ExpandAllButton>
          </li>
        </>
      )}
      {themeConfig.type === Theme.Android && (
        <>
          <li className="item">
            <ResetButton onClick={onReset}></ResetButton>
          </li>
          <li className="item">
            <ExpandAllButton onClick={onExpandAll}></ExpandAllButton>
          </li>
        </>
      )}
      {themeConfig.type === Theme.Student && (
        <>
          <li className="item">
            <ZoomUpButton scale={scale} onClick={onZoomUp}></ZoomUpButton>
          </li>
          <li className="item">
            <ZoomDownButton scale={scale} onClick={onZoomDown}></ZoomDownButton>
          </li>
          <div className="divide"></div>
          <li className="item">
            <ResetButton onClick={onReset}></ResetButton>
          </li>
          <li className="item">
            <ExpandAllButton onClick={onExpandAll}></ExpandAllButton>
          </li>
        </>
      )}
    </ul>
  );
};

export default Controller;
