import React from 'react';
import {Card as BCard, CardProps as BootstrapCardProps} from 'react-bootstrap';
import {Row, Col} from 'react-bootstrap';
import {Badge}  from '@atoms/Badge/Badge';
import Button from '@atoms/Button/Button';
import "./Card.scss"

const { Header } = BCard;

type bgs = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light';

interface CardProps extends BootstrapCardProps {
  width?: number | string;
  header?: any;
  imagevariant?: 'top' | 'bottom' | undefined;
  image?: string;
  headerclasses?: string;
  footerclasses?: string;
  orientation?: 'horizontal' | 'vertical' | undefined;
  textBg?: bgs | undefined;
  border?: bgs;
  title?: string;
  body?: any;
  children?: React.ReactNode;
  maxWidth?: number | string;
  footer?: any;
    //tags and buttons are arrays containing all needed props for the tags and buttons
  tags?: {
    name: string,
    bg: bgs
  }[],
  buttons?: {
    name: string,
    iconName: string,
    variant: bgs
  }[]
}

const Card = (props: CardProps) => {
  const {
  width='18rem',
  maxWidth='540px',
  header=undefined, 
  title=undefined, 
  body=undefined, 
  imagevariant='top', 
  headerclasses='',
  footerclasses='',
  children=undefined,
  orientation='vertical',
  textBg='light',
  image=undefined,
  footer=undefined,
  tags=[],
  buttons=[],
  ...otherProps
} = props;

//render tags as small buttons to later embed in card
let tagList: React.JSX.Element[] | null = null;
if (tags && tags.length > 0) {
  tagList = tags.map((tag: any) => {
    return (
      //access the tag name and color from the array
      <><Badge key={tag.name} bg={tag.bg} subtle>{tag.name}</Badge>&nbsp;</>
    );
  });
}

//render links as icon buttons to later embed in card
let buttonList: React.JSX.Element[] | null = null;
if (buttons) {
  buttonList = buttons.map((button: any) => {
    return (
      <><Button key={button.name} iconName={button.iconName} variant={button.variant}>{button.name}</Button>&nbsp;</>
    );
  });
}

// Horizontal layout rendering
 if (orientation === 'horizontal') {
  return (
    <BCard className={`mb-3 text-bg-${textBg}`} style={{ maxWidth: '540px' }} {...otherProps}>
      <Row className="g-0">
        {imagevariant !== 'bottom' && image && (
          <Col md={4}>
            {image && <img src={image} className="img-fluid rounded-start" alt="" />}
          </Col>
        )}
        <Col md={image ? 8 : 12}>
          {header && <BCard.Header className={headerclasses}>{header}</BCard.Header>}
          <BCard.Body>
            {title && <BCard.Title>{title}</BCard.Title>}
            {tags && <div>{tagList}</div>}
            {body && <BCard.Text>{body}</BCard.Text>}
            {buttons && <div>{buttonList}</div>}
          </BCard.Body>
          {children}
          {footer && <BCard.Footer className={footerclasses}>{footer}</BCard.Footer>}
        </Col>
        {imagevariant === 'bottom' && (
          <Col md={4}>
            {image && <img src={image} className="img-fluid rounded-end" alt="" />}
          </Col>
        )}
      </Row>
    </BCard>
  );
}

// Vertical layout rendering
  return (
    <BCard className={`mb-3 text-bg-${textBg}`} style={{ width }} {...otherProps}>
      {imagevariant !== 'bottom' && image && (
        <img src={image} className="img-fluid rounded-top" alt="" />
      )}
      {header && <Header className={headerclasses}>{header}</Header>}
      <BCard.Body>
        {title && <BCard.Title>{title}</BCard.Title>}
        {tags && <div>{tagList}</div>}
        {body && <BCard.Text>{body}</BCard.Text>}
        {buttons && <div>{buttonList}</div>}
      </BCard.Body>
      {children}
      {footer && <BCard.Footer className={footerclasses}>{footer}</BCard.Footer>}
      {/* If image variant is bottom, image is placed at the bottom of the card */}
      {imagevariant === 'bottom' && image && (
        <img src={image} className="img-fluid rounded-bottom" alt="" />
      )}
    </BCard>
  );
};

export default Card;
// export {Card, CardProps, cardBgs, cardTexts};
export {Card, CardProps};