import React from "react";
import { FieldProps } from "../../types";
import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
import { PropertyFieldBinding } from "../PropertyFieldBinding";
import { ExpandablePanel, IconButton, CloseIcon } from "@firecms/ui";
import { getArrayResolvedProperties, getIconForProperty, isReadOnly } from "../../util";
import { useClearRestoreValue } from "../useClearRestoreValue";
import { useAuthController } from "../../hooks";

/**
 * Array field used for custom
 *
 * This is one of the internal components that get mapped natively inside forms
 * and tables to the specified properties.
 * @group Form fields
 */
export function ArrayCustomShapedFieldBinding<T extends Array<any>>({
                                                                        propertyKey,
                                                                        value,
                                                                        error,
                                                                        showError,
                                                                        isSubmitting,
                                                                        setValue,
                                                                        minimalistView: minimalistViewProp,
                                                                        property,
                                                                        includeDescription,
                                                                        context,
                                                                        disabled
                                                                    }: FieldProps<T, any, any>) {

    const authController = useAuthController();
    const minimalistView = minimalistViewProp || property.minimalistView;

    let resolvedProperties = "resolvedProperties" in property ? property.resolvedProperties : undefined;
    if (!resolvedProperties) {
        resolvedProperties = getArrayResolvedProperties({
            propertyValue: value,
            propertyKey,
            property,
            ignoreMissingFields: false,
            authController
        })
    }

    const expanded = property.expanded === undefined ? true : property.expanded;

    useClearRestoreValue({
        property,
        value,
        setValue
    });

    const title = (<div className="flex items-center w-full">
        <LabelWithIconAndTooltip
            propertyKey={propertyKey}
            icon={getIconForProperty(property, "small")}
            required={property.validation?.required}
            title={property.name}
            className={"text-text-secondary dark:text-text-secondary-dark"}/>
        {Array.isArray(value) && <span className={"text-sm text-text-secondary dark:text-text-secondary-dark ml-1"}>({value.length})</span>}
        <div className="flex-grow"/>
        {(property.nullable || property.clearable) && !disabled && (
            <IconButton
                size="small"
                onClick={(e) => {
                    e.stopPropagation();
                    e.preventDefault();
                    setValue(null);
                }}
            >
                <CloseIcon size={"small"}/>
            </IconButton>
        )}
    </div>);

    const body = resolvedProperties.map((childProperty, index) => {
        const thisDisabled = isReadOnly(childProperty) || Boolean(childProperty.disabled);
        const fieldProps = {
            propertyKey: `${propertyKey}[${index}]`,
            disabled: disabled || thisDisabled,
            property: childProperty,
            includeDescription,
            context,
            partOfArray: true,
            minimalistView: false,
            autoFocus: false
        };
        return <div key={`custom_shaped_array_${index}`} className="pb-4">
            <PropertyFieldBinding {...fieldProps}/>
        </div>;
    });

    return (

        <>

            {!minimalistView &&
                <ExpandablePanel initiallyExpanded={expanded}
                                 title={title}
                                 innerClassName={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}>
                    {body}
                </ExpandablePanel>}

            {minimalistView && body}

            <FieldHelperText includeDescription={includeDescription}
                             showError={showError}
                             error={error}
                             disabled={disabled}
                             property={property}/>

        </>
    );
}