import { useField, useFieldSchema } from "@tachybase/schema";
import { useTranslation } from "react-i18next";
import { SchemaSettings } from "../../../../application/schema-settings/SchemaSettings.mjs";
import { useColumnSchema, useDesignable } from "../../../../schema-component/index.mjs";
const createSettingsItem = (config)=>({
        name: config.name,
        type: 'select',
        useComponentProps () {
            var _fieldSchema_xcomponentprops;
            const { t } = useTranslation();
            const field = useField();
            const schema = useFieldSchema();
            const { fieldSchema: tableColumnSchema } = useColumnSchema();
            const fieldSchema = tableColumnSchema || schema;
            const { dn } = useDesignable();
            return {
                title: t(config.title),
                options: config.options(t),
                value: (null == (_fieldSchema_xcomponentprops = fieldSchema['x-component-props']) ? void 0 : _fieldSchema_xcomponentprops[config.name]) || config.defaultValue,
                onChange (value) {
                    const schema = {
                        ['x-uid']: fieldSchema['x-uid']
                    };
                    fieldSchema['x-component-props'] = fieldSchema['x-component-props'] || {};
                    fieldSchema['x-component-props'][config.name] = value;
                    schema['x-component-props'] = fieldSchema['x-component-props'];
                    field.componentProps = field.componentProps || {};
                    field.componentProps[config.name] = value;
                    dn.emit('patch', {
                        schema
                    });
                }
            };
        }
    });
const getSizeOptions = (t)=>[
        {
            value: 'small',
            label: t('Small')
        },
        {
            value: 'middle',
            label: t('Middle')
        },
        {
            value: 'large',
            label: t('Large')
        },
        {
            value: 'oversized',
            label: t('Oversized')
        },
        {
            value: 'auto',
            label: t('Auto')
        }
    ];
const getObjectFitOptions = (t)=>[
        {
            value: 'cover',
            label: t('Cover')
        },
        {
            value: 'fill',
            label: t('Fill')
        },
        {
            value: 'contain',
            label: t('Contain')
        },
        {
            value: 'scale-down',
            label: t('Scale Down')
        },
        {
            value: 'none',
            label: t('None')
        }
    ];
const size = createSettingsItem({
    name: 'size',
    title: 'Size',
    options: getSizeOptions,
    defaultValue: 'small'
});
const objectFit = createSettingsItem({
    name: 'objectFit',
    title: 'Object Fit',
    options: getObjectFitOptions,
    defaultValue: 'cover'
});
const inputPreviewComponentFieldSettings = new SchemaSettings({
    name: 'fieldSettings:component:Input.Preview',
    items: [
        size,
        objectFit
    ]
});
export { inputPreviewComponentFieldSettings };
