import { isEqual, isNil } from 'lodash-es';
import { useState } from 'react';
import { Tab } from '../../components/Tab';
import { MaterialDesign2SchemeStorage } from '../../material-2-scheme';
import { SchemeContent } from '../../models';
import { isNilOrEmpty } from '../../utls';
import { SchemeExport } from './Export';
import { M2SchemeBuilder } from './m2-scheme/Builder';
import { M2SchemePreview } from './m2-scheme/Preview';

const tabOptions = [
  { title: 'Overview', id: 'overview' },
  { title: 'Builder', id: 'builder' },
  { title: 'Exports', id: 'export' },
];

type M2SchemeProps = {
  scheme: SchemeContent<MaterialDesign2SchemeStorage>;
};

export function M2Scheme({ scheme }: M2SchemeProps) {
  const [activeTab, setActiveTab] = useState<(typeof tabOptions)[number]['id']>(() =>
    isNil(scheme.schemeStorage.scheme) ? 'builder' : 'overview',
  );

  return (
    <>
      <Tab
        tabs={tabOptions}
        activeTab={activeTab}
        onActive={(v) => setActiveTab(v as string)}
        disabled={{
          overview: isNilOrEmpty(scheme.schemeStorage?.scheme),
          export: isNilOrEmpty(scheme.schemeStorage?.cssVariables),
        }}
      />
      {isEqual(activeTab, 'overview') && <M2SchemePreview scheme={scheme} />}
      {isEqual(activeTab, 'builder') && (
        <M2SchemeBuilder scheme={scheme} onBuildComplete={() => setActiveTab('overview')} />
      )}
      {isEqual(activeTab, 'export') && <SchemeExport scheme={scheme} />}
    </>
  );
}
