import { reactive, defineComponent } from 'vue';
import MonacoEditor from './components/MonacoEditor.vue';
import { Schema, superSchema } from '../lib/types';

import SchemaForm from '../lib/SchemaForm';
import stringDemo from './demos/string';
import numberDemo from './demos/number';
import objectDemo from './demos/object';
import staticArray from './demos/staticArray';
import singleTypeArray from './demos/singleTypeArray';

import './app.css';

export default defineComponent({
  components: {
    MonacoEditor,
    SchemaForm,
  },
  setup() {
    const toJson = (json: any): string => {
      return JSON.stringify(json, null, 2);
    };

    // 页面数据
    const demo: {
      schema: Schema | null; // 不同类型的 schema
      schemaCode: string; // 展示 schema code
      data: any; // 最终的 value
      dataCode: string; // 展示最终的结果，以字符串的形式
      uiSchemaCode: any; // 样式 schema
    } = reactive({
      schema: null,
      schemaCode: '',
      data: null,
      dataCode: '',
      uiSchemaCode: '',
    });

    // 根据选择的 schema item 设置当前项
    const settingDemo = (superSchema: superSchema) => {
      demo.schema = superSchema.schema;
      demo.schemaCode = toJson(superSchema.schema);
      demo.data = superSchema.default;
      console.log(superSchema);
      demo.dataCode = toJson(superSchema.default);
      demo.uiSchemaCode = toJson(superSchema.uiSchema);
    };

    settingDemo(stringDemo);

    // 当右侧的值发生变化了之后，让左侧的值也发生变化
    const handleChange = (val: string) => {
      demo.dataCode = toJson(val);
    };

    // 切换
    const handleChangeDemo = (type: string) => {
      switch (type) {
        case 'string':
          settingDemo(stringDemo);
          break;
        case 'number':
          settingDemo(numberDemo);
          break;
        case 'object':
          settingDemo(objectDemo);
          break;
        case 'staticArray':
          settingDemo(staticArray);
          break;
        case 'singleTypeArray':
          settingDemo(singleTypeArray);
          break;
        default:
          throw new Error('此类型暂未支持！');
      }
    };

    return () => {
      return (
        <div class='app'>
          <h1>Vue3 JsonSchema Form</h1>
          <div class='btn-wrapper'>
            <button
              class='btn-item'
              onClick={() => {
                handleChangeDemo('string');
              }}
            >
              String
            </button>
            <button
              class='btn-item'
              onClick={() => {
                handleChangeDemo('number');
              }}
            >
              Number
            </button>
            <button class='btn-item'>Integer</button>
            <button
              class='btn-item'
              onClick={() => {
                handleChangeDemo('object');
              }}
            >
              Object
            </button>
            <button
              class='btn-item'
              onClick={() => {
                handleChangeDemo('staticArray');
              }}
            >
              staticArray
            </button>
            <button
              class='btn-item'
              onClick={() => {
                handleChangeDemo('singleTypeArray');
              }}
            >
              staticArray
            </button>
          </div>
          <div class='container'>
            <div class='code'>
              <MonacoEditor
                title='Schema'
                code={demo.schemaCode}
                onChange={handleChange}
              ></MonacoEditor>
              <div class='bottom-container'>
                <MonacoEditor
                  class='bottom-item down-left'
                  title='UiSchema'
                  code={demo.uiSchemaCode}
                ></MonacoEditor>
                <MonacoEditor
                  class='bottom-item'
                  title='value'
                  code={demo.dataCode}
                  onChange={handleChange}
                ></MonacoEditor>
              </div>
            </div>
            <div class='form'>
              <SchemaForm
                //  eslint-disable-next-line
                schema={demo.schema!}
                value={demo.data}
                onChange={handleChange}
              ></SchemaForm>
            </div>
          </div>
        </div>
      );
    };
  },
});

// 把父组件的函数传递下去，让子组件调用来改变父组件的数据