import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo, useCallback, useMemo } from 'react';
import { LayoutVariant } from '@redocly/config';
import { useAtom, useAtomValue } from 'jotai';
import { useWriteAtom } from '../../jotai/use-write-atom.js';
import { SamplesMiddlePanel, SamplesPanel, Row, Section, CodeBlockPanel } from '../common/index.js';
import { getMediaType } from '../../models/index.js';
import { MediaTypeSamples } from '../PayloadSamples/index.js';
import { Schema } from '../Schema/index.js';
import { Markdown } from '../Markdown/index.js';
import { layoutAtom } from '../../jotai/app.js';
import { globalStoreAtom } from '../../jotai/store.js';
import { operationStore } from '../../jotai/operation.js';
import { styled } from '../../styled-components.js';
const getMediaTypeInfo = (schemaRef, exampleRef) => {
    if (!schemaRef) {
        return {};
    }
    const info = {
        schema: { $ref: schemaRef },
    };
    if (exampleRef) {
        info.examples = { example: { $ref: exampleRef } };
    }
    return info;
};
function SchemaDefinitionComponent({ schemaRef, exampleRef, showReadOnly = true, showWriteOnly = false, }) {
    const layout = useAtomValue(layoutAtom);
    const { parser, options } = useAtomValue(globalStoreAtom);
    const writeAtom = useWriteAtom();
    const mediaModel = useMemo(() => getMediaType(parser, 'json', false, getMediaTypeInfo(schemaRef, exampleRef), options, {
        operation: { pointer: 'SchemaDefinitionComponent' },
    }), [exampleRef, options, parser, schemaRef]);
    const [operationState, setOperation] = useAtom(operationStore(mediaModel.operation?.pointer));
    const handleMediaTypeChange = useCallback((key) => {
        if (!mediaModel.schema)
            return;
        const schema = mediaModel.schema;
        const schemaOneOf = schema.oneOf;
        if (schemaOneOf && mediaModel?.examples && Object.keys(mediaModel?.examples).includes(key)) {
            const activeOneOfIndex = schemaOneOf.findIndex((schema) => schema.title === key);
            if (activeOneOfIndex !== -1 && schema) {
                writeAtom(operationStore(schema.operationPointer), {
                    activeExampleName: schema.oneOf?.[activeOneOfIndex]?.title,
                    activeOneOf: { [schema.pointer]: activeOneOfIndex },
                });
            }
        }
        if (operationState.activeExampleName !== key) {
            setOperation({ activeExampleName: key });
        }
    }, [
        mediaModel?.examples,
        mediaModel.schema,
        operationState.activeExampleName,
        setOperation,
        writeAtom,
    ]);
    const isStacked = layout === LayoutVariant.STACKED;
    return (_jsx(Section, { children: _jsxs(Row, { layout: layout, children: [_jsxs(SamplesMiddlePanel, { isStacked: isStacked, children: [mediaModel.schema?.description && (_jsx(Description, { children: _jsx(Markdown, { source: mediaModel.schema?.description }) })), _jsx(Schema, { skipWriteOnly: !showWriteOnly, skipReadOnly: !showReadOnly, schema: mediaModel.schema, level: 1 })] }), _jsx(SamplesPanel, { isStacked: isStacked, children: _jsx(CodeBlockPanel, { className: "panel-response-samples", children: _jsx(MediaTypeSamples, { mediaType: mediaModel, onChange: handleMediaTypeChange }) }) })] }) }));
}
export const SchemaDefinition = memo(SchemaDefinitionComponent);
const Description = styled.div `
  margin-bottom: var(--spacing-vertical);
`;
//# sourceMappingURL=SchemaDefinition.js.map