import { getClassNames } from '@websolutespa/bom-core';
import { ComponentPropsWithRef, forwardRef, ReactNode } from 'react';
import styled from 'styled-components';
import { UIComponentWithRef, UIStyledComponentProps } from '../../components/types';
import { getCssResponsive } from '../../components/utils';

// ${props => getVariantKey('fieldset', props.variant, props.variants)}

const StyledFieldset = styled.fieldset<FieldsetProps>`
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;

  & > * {
    flex: 1 1 340px;
  }

  // reset
  border: 0;
  padding: 0.001em 0 0 0;
  margin: 0;
  min-width: 0;

  legend {
    padding: 0;
    display: table;
  }

  ${props => getCssResponsive(props)}
`;

type Props = ComponentPropsWithRef<'fieldset'> & {
  before?: ReactNode;
  after?: ReactNode;
  // variant?: keyof typeof fieldsetVariants | (string & {});
  // variants?: IFieldsetVariants;
};

export type FieldsetProps = UIStyledComponentProps<Props, 'fieldset'>;

export type FieldsetComponent<C extends React.ElementType = 'fieldset'> = UIComponentWithRef<C, Props>;

export const Fieldset: FieldsetComponent = forwardRef(
  function Fieldset({
    as = 'fieldset',
    className,
    before,
    children,
    after,
    // variant = 'default',
    // variants,
    ...props
  }, ref) {
    // const globalVariants = useVariants('fieldset', fieldsetVariants);
    // variants = variants || globalVariants;
    // const classNames = getClassNames('fieldset', className, variant);
    const classNames = getClassNames('fieldset', className);
    return (
      <StyledFieldset
        className={classNames}
        // variant={variant}
        // variants={variants}
        {...props}
      >
        {before}
        {children}
        {after}
      </StyledFieldset>
    );
  });