import * as Ariakit from '@ariakit/react';
import { IconX } from '@websolutespa/bom-mixer-icons';
import styled from 'styled-components';
import { Button } from '../button/button';

import { getClassNames } from '@websolutespa/bom-core';
import { useLabel } from '@websolutespa/bom-mixer-hooks';
import { ReactElement, ReactNode, useContext } from 'react';
import { getVariantKey } from '../../variants';
import { getCssResponsive } from '../utils';
import { ModalContext } from './modal.context';
import { IModalVariants, modalVariants } from './modal.variants';

const ModalHeaderStyle = styled.div<ModalHeaderProps>`
  ${props => getVariantKey('header', props.variant, props.variants)}
  ${props => getCssResponsive(props)}
`;

export type ModalHeaderProps = {
  className?: string;
  variant?: keyof typeof modalVariants | (string & {});
  variants?: IModalVariants;
  children?: ReactNode;
  close?: ReactElement;
};

export const ModalHeader = ({ children, close, className, variant, variants, ...props }: ModalHeaderProps) => {
  const label = useLabel();
  const classNames = getClassNames('modal__header', className);
  const context = useContext(ModalContext);
  return (
    <ModalHeaderStyle
      className={classNames}
      variant={variant || context.variant}
      variants={variants || context.variants}
      {...props}
    >
      {children}
      <Ariakit.DialogDismiss render={close || (
        <Button variant="circle" aria-label={label('close')}><IconX /></Button>
      )} />
    </ModalHeaderStyle>
  );
};

ModalHeader.displayName = 'ModalHeader';