import type { FC, CSSProperties } from 'react';
import React, { useContext } from 'react';
import cx from 'classnames';
import { FullscreenModalContext } from '../fullscreenModal/components/fullScreenModalContext';
import { Modal } from '../modal';
import { DEFAULT_SIDECAR_CLOSE_TIMEOUT_MS } from '../../constants/closeTimeout';
import type { CustomSidecarProps } from './types';

export const CLASSNAME = 'Sidecar';

export const SidecarCustom: FC<CustomSidecarProps> = ({ variant, className, width, ...props }) => {
    const { isFSM } = useContext(FullscreenModalContext);
    const contentStyle = width
        ? ({ ['--sidecar-width']: `${Math.max(width, 340)}px` } as CSSProperties)
        : undefined;

    return (
        <Modal.Custom
            variant="Sidecar"
            closeTimeoutMS={DEFAULT_SIDECAR_CLOSE_TIMEOUT_MS}
            contentStyle={contentStyle}
            {...props}
            className={cx(className, { 'FullScreenModal-Sidecar': isFSM })}
        />
    );
};