import React from 'react';
import { useState } from 'react';

interface IProps {
  dataSourceElement: JSX.Element;
  dataSyncElement: JSX.Element;
  dataLogElement: JSX.Element;
}

type ViewType = 'datasource' | 'datasync' | 'datalog';

const SwitchButton: React.FunctionComponent<{
  viewType: ViewType;
  current: ViewType;
  label: string;
  onClick: (t: ViewType) => void;
}> = props => {
  return (
    <button
      type="button"
      className={
        'jldbq-btn ' +
        (props.viewType === props.current ? 'jldbq-btn-current' : '')
      }
      onClick={() => props.onClick(props.viewType)}
    >
      {props.label}
    </button>
  );
};

const DataView: React.FunctionComponent<IProps> = props => {
  const [view, setView] = useState('datasource' as ViewType);

  const el =
    view === 'datasource'
      ? props.dataSourceElement
      : view === 'datasync'
      ? props.dataSyncElement
      : props.dataLogElement;

  return (
    <div
      style={{
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
        padding: '5px'
      }}
    >
      <div
        style={{
          padding: '5px 5px 10px',
          borderBottom: '1px solid #DBE3EA',
          display: 'flex',
          justifyContent: 'space-around',
          alignItems: 'center'
        }}
      >
        <SwitchButton
          viewType="datasource"
          current={view}
          label="数据源管理"
          onClick={setView}
        />
        <SwitchButton
          viewType="datasync"
          current={view}
          label="同步配置"
          onClick={setView}
        />
        <SwitchButton
          viewType="datalog"
          current={view}
          label="日志管理"
          onClick={setView}
        />
      </div>
      {el}
    </div>
  );
};

export default DataView;
