import React, { FC, useMemo } from 'react';
import BackIcon from '../../images/ic_back.svg';
import CloseIcon from '../../images/ic_close.svg';
import themeFactory from '../../theme/themeFactory';
import { Theme } from '../../theme/types';

interface IProps {
  onCancel: any;
  onOk: any;
  theme: Theme;
}

const AndroidHeader: FC<IProps> = ({ onCancel, onOk }) => {
  return (
    <div className="header">
      <span className="knowledge-back-btn" onClick={onCancel}>
        <BackIcon className="logo" />
      </span>
      <span className="title">概念图谱</span>
      <span className="save-btn" onClick={onOk}>
        保存图片
      </span>
    </div>
  );
};

const WebHeader: FC<IProps> = ({ onCancel }) => {
  return (
    <div className="header">
      <span className="title">概念图谱</span>
      <span className="knowledge-back-btn" onClick={onCancel}>
        <CloseIcon className="logo" />
      </span>
    </div>
  );
};

const Header: FC<IProps> = ({ onCancel, onOk, theme }) => {
  const themeConfig = useMemo(() => themeFactory.create(theme), []);
  return (
    <>
      {themeConfig.type === Theme.Android && <AndroidHeader onCancel={onCancel} onOk={onOk} />}
      {[Theme.Student, Theme.Teacher].includes(themeConfig.type) && (
        <WebHeader onCancel={onCancel} onOk={onOk} />
      )}
    </>
  );
};

export default Header;
