import type { HTMLAttributes, RefAttributes } from 'react';
import React from 'react';

import { Heading } from '@shoptet/ui-core-web';
import type { SafeOmit } from '@shoptet/utils';

export interface InheritedDivProps
  extends SafeOmit<HTMLAttributes<HTMLDivElement>, 'children' | 'style'>, RefAttributes<HTMLDivElement> {}
export interface InheritedTitleProps
  extends SafeOmit<HTMLAttributes<HTMLHeadingElement>, 'children' | 'style'>, RefAttributes<HTMLHeadingElement> {}

// Card props
export interface CardOwnProps {
  /**
   * Content of the card.
   */
  children: React.ReactNode;
  /**
   * Controls whether the card has a border.
   * @default false
   */
  border?: boolean;
}
export interface CardProps extends CardOwnProps, InheritedDivProps {}

// Card.Subcomponent props
export interface CardSubcomponentsOwnProps {
  children: React.ReactNode;
}
export interface CardHeaderProps extends CardSubcomponentsOwnProps, InheritedDivProps {}
export interface CardFooterProps extends CardSubcomponentsOwnProps, InheritedDivProps {}
export interface CardContentProps extends CardSubcomponentsOwnProps, InheritedDivProps {}
export interface CardTitleProps extends CardSubcomponentsOwnProps, InheritedTitleProps {}

const CardHeader: React.FC<CardHeaderProps> = ({ children, ...rest }) => {
  return (
    <div {...rest} className='card__header'>
      {children}
    </div>
  );
};

const CardContent: React.FC<CardContentProps> = ({ children, ...rest }) => {
  return (
    <div {...rest} className='card__content'>
      {children}
    </div>
  );
};

const CardFooter: React.FC<CardFooterProps> = ({ children, ...rest }) => {
  return (
    <div {...rest} className='card__footer'>
      {children}
    </div>
  );
};

const CardTitle: React.FC<CardTitleProps> = ({ children, ...rest }) => {
  return (
    <Heading level={2} {...rest} className='card__title'>
      {children}
    </Heading>
  );
};

export const Card = Object.assign(
  function Card({ children, border = false, ...rest }: CardProps) {
    return (
      <div {...rest} className={`card${border ? ' card--bordered' : ''}`}>
        {children}
      </div>
    );
  },
  {
    Header: Object.assign(CardHeader, {
      displayName: 'Card.Header',
    }),
    Content: Object.assign(CardContent, {
      displayName: 'Card.Content',
    }),
    Footer: Object.assign(CardFooter, {
      displayName: 'Card.Footer',
    }),
    Title: Object.assign(CardTitle, {
      displayName: 'Card.Title',
    }),
  }
);