import React from 'react';
// Import UI providers and render engine, adapters
import { UIStoreProvider, createStore } from '@ui-schema/react/UIStore';
import { storeUpdater } from '@ui-schema/react/storeUpdater';
import { UIMetaProvider, useUIMeta } from '@ui-schema/react/UIMeta';
import { WidgetEngine } from '@ui-schema/react/WidgetEngine';
import { DefaultHandler } from '@ui-schema/react/DefaultHandler';
import { ValidityReporter } from '@ui-schema/react/ValidityReporter';
import { schemaPluginsAdapterBuilder } from '@ui-schema/react/SchemaPluginsAdapter';
import { isInvalid } from '@ui-schema/react/isInvalid';
import { createOrderedMap } from '@ui-schema/ui-schema/createMap';
import { keysToName } from '@ui-schema/ui-schema/Utils/keysToName';
// basic in-schema translator / `t` keyword support
import { translatorRelative } from '@ui-schema/ui-schema/TranslatorRelative';
// Validator engine, validators and adapter plugin to react
import { Validator } from '@ui-schema/json-schema/Validator';
import { standardValidators } from '@ui-schema/json-schema/StandardValidators';
import { requiredValidatorLegacy } from '@ui-schema/json-schema/Validators/RequiredValidatorLegacy';
import { validatorPlugin } from '@ui-schema/json-schema/ValidatorPlugin';
import { requiredPlugin } from '@ui-schema/json-schema/RequiredPlugin';
// Get the widgets binding for your design-system
// import type { MuiBinding } from '@ui-schema/ds-material/BindingType';
import { bindingComponents } from '@ui-schema/ds-material/Binding/Components'
import { widgetsDefault } from '@ui-schema/ds-material/Binding/WidgetsDefault';
import { widgetsExtended } from '@ui-schema/ds-material/Binding/WidgetsExtended';
import { GridContainer } from '@ui-schema/ds-material/GridContainer';
import { SchemaGridHandler } from '@ui-schema/ds-material/Grid'; // MUI v5/v6
// import { GridItemPlugin } from '@ui-schema/ds-material/GridItemPlugin'; // MUI v7
import Button from '@mui/material/Button';

// could be fetched from some API or bundled with the app
const schemaBase = {
    type: 'object',
    properties: {
        country: {
            type: 'string',
            widget: 'Select',
            enum: [
                'mx',
                'my',
                'fj',
            ],
            default: 'fj',
            ttEnum: 'upper',
        },
        name: {
            type: 'string',
            maxLength: 20,
        },
    },
    required: [
        'country',
        'name',
    ],
};

// or fetch from API
const data = {};

export const DemoForm = () => {
    // optional state for display errors/validity
    const [showValidity, setShowValidity] = React.useState(false);

    // needed variables and setters for the render engine, create wherever you like
    const [store, setStore] = React.useState(() => createStore(createOrderedMap(data)));
    const [schema/*, setSchema*/] = React.useState(() => createOrderedMap(schemaBase));

    // `useUIMeta` can be used safely, without performance impact (while `useUIStore` impacts performance)
    const {t} = useUIMeta()

    const onChange = React.useCallback((actions) => {
        setStore(storeUpdater(actions))
    }, [setStore])

    return <>
        <UIStoreProvider
            store={store}
            onChange={onChange}
            showValidity={showValidity}
        >
            <GridContainer>
                <WidgetEngine isRoot schema={schema}/>
            </GridContainer>
        </UIStoreProvider>

        <Button
            /* show the validity only at submit (or pass `true` to `showValidity`) */
            onClick={() => {
                if(isInvalid(store.getValidity())) {
                    setShowValidity(true)
                    return
                }
                console.log('doingSomeAction:', store.valuesToJS())
            }}
        >
            submit
        </Button>
    </>
};

/**
 * @type {MuiBinding}
 */
const customBinding = {
    ...bindingComponents,

    // Widget mapping by schema type or custom ID.
    widgets: {
        ...widgetsDefault,
        ...widgetsExtended,
    },

    // Plugins that wrap each rendered widget.
    widgetPlugins: [
        DefaultHandler, // handles `default` keyword

        // Runs SchemaPlugins, connects to SchemaResource (if enabled)
        schemaPluginsAdapterBuilder([
            // runs `validate` and related schema postprocessing
            validatorPlugin,

            // injects the `required` prop
            requiredPlugin,
        ]),

        SchemaGridHandler, // MUI v5/6 Grid item
        // GridItemPlugin, // MUI v7 Grid item

        ValidityReporter, // keeps `valid`/`errors` in sync with `store`
    ],
};

const validator = Validator([
    ...standardValidators,
    requiredValidatorLegacy, // opinionated validator, HTML-like, empty-string = invalid
])
const validate = validator.validate

export default function App() {
    return <UIMetaProvider
        // the components and widgets bindings for the app
        binding={customBinding}

        // optional, needed for any validation based plugin
        validate={validate}

        // optional, generate labels, error messages,
        // support embedded translations
        t={translatorRelative}

        // optional, enable `name` attribute generation
        keysToName={keysToName}

        // never pass down functions like this - always use e.g. `React.useCallback`
        // or use functions defined outside rendering, check performance docs for more
        //t={(text, context, schema) => {/* add translations */}}
    >
        {/*
          * Use one UIMetaProvider with multiple forms.
          * it's possible to nest `UIMetaProvider` if you need to have different `binding`,
          * e.g. depending on some lazy loaded component tree
          */}
        <DemoForm/>
    </UIMetaProvider>
}