import React from 'react'
import { ViewPicker } from './ViewPicker.mjs'
import { DesignsView } from './DesignsView.mjs'
import { MeasurementsView } from './MeasurementsView.mjs'
import { DraftView } from './DraftView.mjs'
import { SaveView } from './SaveView.mjs'
import { ExportView } from './ExportView.mjs'
import { UndosView } from './UndosView.mjs'
import { LayoutView } from './LayoutView.mjs'
import { DocsView } from './DocsView.mjs'
import { EditSettingsView } from './EditSettingsView.mjs'
import { ErrorIcon } from '@freesewing/react/components/Icon'
import {
  OptionsIcon,
  MeasurementsIcon,
  BeakerIcon,
  GaugeIcon,
  PrintIcon,
  SaveIcon,
  ExportIcon,
  EditIcon,
  FixmeIcon,
  ListIcon,
  XrayIcon,
  DocsIcon,
  DesignIcon,
  UiIcon,
  BackIcon,
} from '@freesewing/react/components/Icon'

/*
 * A lookup table for view icons
 */
const viewIcons = {
  draft: OptionsIcon,
  measurements: MeasurementsIcon,
  test: BeakerIcon,
  timing: GaugeIcon,
  layout: PrintIcon,
  save: SaveIcon,
  export: ExportIcon,
  editSettings: EditIcon,
  logs: ListIcon,
  inspect: XrayIcon,
  docs: DocsIcon,
  designs: DesignIcon,
  picker: UiIcon,
  undos: BackIcon,
}

/*
 * This returns a view-specific component
 */
export const View = (props) => {
  const { view } = props

  if (view === 'designs') return <DesignsView {...props} />
  if (view === 'measurements') return <MeasurementsView {...props} />
  if (view === 'draft') return <DraftView {...props} />
  if (view === 'save') return <SaveView {...props} />
  if (view === 'export') return <ExportView {...props} />
  if (view === 'undos') return <UndosView {...props} />
  if (view === 'layout') return <LayoutView {...props} />
  if (view === 'docs') return <DocsView {...props} />
  if (view === 'editSettings') return <EditSettingsView {...props} />

  return <h1 className="tw-ext-center tw-my-12">No view component for view {props.view}</h1>
}

/*
 * This returns a view-specific icon
 */
export const ViewIcon = ({ view, className = 'tw-w-6 tw-h-6' }) => {
  const Icon = viewIcons[view] || FixmeIcon

  return <Icon className={className} />
}

export const viewLabels = {
  draft: {
    t: 'Draft Pattern',
    d: 'Choose this if you are not certain what to pick',
  },
  measurements: {
    t: 'Pattern Measurements',
    d: 'Update or load measurements to generate a pattern for',
  },
  test: {
    t: 'Test Design',
    d: 'See how different options or changes in measurements influence the design',
  },
  timing: {
    t: 'Time Design',
    d: 'Shows detailed timing of the pattern being drafted, allowing you to find bottlenecks in performance',
  },
  layout: {
    t: 'Pattern Layout',
    d: 'Organize your pattern parts to minimize paper use',
  },
  save: {
    t: 'Save pattern as...',
    d: 'Save the changes to this pattern in your account, or save it as a new pattern',
  },
  export: {
    t: 'Export Pattern',
    d: 'Export this pattern into a variety of formats',
  },
  editSettings: {
    t: 'Edit settings by hand',
    d: "Throw caution to the wind, and hand-edit the pattern's settings",
  },
  logs: {
    t: 'Pattern Logs',
    d: 'Show the logs generated by the pattern, useful to troubleshoot problems',
  },
  inspect: {
    t: 'Pattern inspector',
    d: "Load the pattern in the inspector, giving you in-depth info about a pattern's components",
  },
  docs: {
    t: 'Documentation',
    d: 'More information and links to documentation',
  },
  designs: {
    t: 'Choose a different Design',
    d: 'Current design: {- design }',
  },
  picker: {
    t: 'Choose a different view',
    d: 'fixme',
  },
  undos: {
    t: 'Undo History',
    d: 'Time-travel through your recent pattern changes',
  },
}