import React, { useState } from 'react';
import { SchemaForm } from '@knapsack/design-system';
import TemplateView, {
  Props as TemplateViewProps,
} from '../../pattern-view/template-view';
import { Slice, SliceRenderParams } from './types';
import { useSelector } from '../../../store';
import './pattern-template-slice.scss';

type Data = {
  patternId?: string;
  templateId?: string;
  demoId?: string;
  demoSize?: TemplateViewProps['demoSize'];
  showReadme?: TemplateViewProps['isReadmeShown'];
  showSchemaForm?: TemplateViewProps['isSchemaFormShown'];
};

type Props = SliceRenderParams<Data>;

function PatternTemplateSliceEdit({
  canEdit,
  setSliceData,
  data: sliceData,
}: Props) {
  const [formData, setFormData] = useState(
    sliceData || {
      patternId: '',
      templateId: '',
      demoId: '',
      showReadme: false,
      demoSize: 'm',
      showSchemaForm: true,
    },
  );
  const patterns = useSelector(s => Object.values(s.patternsState.patterns));

  if (patterns.length === 0) return <div>Loading...</div>;

  const {
    patternId,
    templateId,
    demoId,
    showReadme,
    demoSize,
    showSchemaForm,
  } = formData;

  const schemaProps: any = {
    patternId: {
      type: 'string',
      title: 'Pattern',
      enum: patterns.map(p => p.id),
      enumNames: patterns.map(p => p.title),
    },
  };

  if (patternId) {
    const { templates } = patterns.find(p => p.id === patternId);
    schemaProps.templateId = {
      type: 'string',
      title: 'Template',
      enum: templates.map(t => t.id),
      enumNames: templates.map(t => t.title),
      default: templates.map(t => t.id)[0],
    };
  }

  if (templateId) {
    const { templates } = patterns.find(p => p.id === patternId);
    const { demos, demosById } = templates.find(t => t.id === templateId);
    schemaProps.demoId = {
      type: 'string',
      title: 'Example',
      enum: demos,
      enumNames: demos.map(dId => demosById[dId]?.title),
      // default: demos[0] ?? '',
    };
  }

  if (showSchemaForm) {
    schemaProps.demoSize = {
      type: 'string',
      title: 'Stage Size',
      enum: ['s', 'm', 'l', 'full'],
      enumNames: ['Small', 'Medium', 'Large', 'Full'],
      default: 'l',
    };
  }

  schemaProps.showSchemaForm = {
    type: 'boolean',
    title: 'Show Schema Form',
    default: true,
  };

  return (
    <SchemaForm
      formData={formData}
      schema={{
        type: 'object',
        $schema: 'http://json-schema.org/draft-07/schema',
        properties: schemaProps,
      }}
      isInline
      onChange={({ formData: newFormData }) => {
        const x: Data = {
          ...newFormData,
        };
        if (newFormData.patternId !== formData.patternId) {
          x.templateId = '';
          x.demoId = '';
        }
        if (!x.patternId) {
          x.patternId = patterns[0]?.id;
        }
        if (newFormData.templateId !== formData.templateId) {
          x.templateId = '';
        }
        const { templates } = patterns.find(p => p.id === x.patternId);
        if (!x.templateId) {
          x.templateId = templates[0]?.id;
          x.demoId = '';
        }
        if (!x.demoId) {
          const [firstDemoId] = templates.find(
            t => t.id === x.templateId,
          )?.demos;
          x.demoId = firstDemoId;
        }
        setFormData(x);
        setSliceData(x);
      }}
    />
  );
}

const PatternTemplateSlice: React.FC<Props> = ({ data }: Props) => {
  const {
    patternId,
    templateId,
    demoId,
    showReadme,
    demoSize,
    showSchemaForm,
  } = data;

  const isReady = patternId && templateId && demoId;
  return (
    <>
      {isReady && (
        <TemplateView
          templateId={templateId}
          id={patternId}
          demoId={demoId}
          isVerbose={false}
          isReadmeShown={showReadme}
          demoSize={demoSize}
          isTitleShown={false}
          isSchemaFormShown={showSchemaForm}
        />
      )}

      {!isReady && (
        <div className="pattern-template-slice__empty-state">
          <h3>Pattern Example</h3>
          <p>No pattern example has been selected.</p>
          <p>Select and configure the example in the slice settings.</p>
        </div>
      )}
    </>
  );
};

export const patternTemplateSlice: Slice<Data> = {
  id: 'pattern-template-slice',
  title: 'Pattern Example',
  description: 'Render a Pattern Example',
  render: props => <PatternTemplateSlice {...props} />,
  renderEditForm: props => <PatternTemplateSliceEdit {...props} />,
};