import { getClassNames } from '@websolutespa/bom-core';
import { forwardRef, useContext } from 'react';
import styled from 'styled-components';
import { getVariantKey } from '../../variants';
import { UIStyledComponentProps } from '../types';
import { getCssResponsive } from '../utils';
import { ModalContext } from './modal.context';
import { IModalVariants, modalVariants } from './modal.variants';

const ModalContentStyle = styled.div<ModalContentProps>`
  ${props => getVariantKey('content', props.variant, props.variants)}
  ${props => getCssResponsive(props)}
`;

export type ModalContentProps = UIStyledComponentProps<{
  className?: string;
  variant?: keyof typeof modalVariants | (string & {});
  variants?: IModalVariants;
}>;

export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
  function ModalContent({ className, children, variant, variants, ...props }, ref) {
    const classNames = getClassNames('modal__content', className);
    const context = useContext(ModalContext);
    return (
      <ModalContentStyle
        className={classNames}
        variant={variant || context.variant}
        variants={variants || context.variants}
        ref={ref}
        {...props} >
        {children}
      </ModalContentStyle>
    );
  }
);