import React, { useState } from 'react'

import styles from './_tile.module.scss'
import Button from '../../Button/Button'
import { type ButtonProps } from '../../Button/Button.models'
import DropdownMenu from '../../DropdownMenu/DropdownMenu'
import Icon from '../../Icons/Icon'
import Image from '../../Image/Image'
import { type MenuProps } from '../../Menu/Menu'

type TilePropsBase = {
  /** The header for the `Tile` is made up of an image, title, and subtitle. */
  header: {
    title: string
    imgUrl?: string
    subtitle?: string
  }
  /** Unique identifier for the `Tile`. */
  id: string
  /** The tabIndex is used to allow the `Tile` to have a focused state. */
  tabIndex?: number
  /** Optionally show a `Menu`. If this is undefined, then the `Menu` button will be hidden. */
  menuProps?: MenuProps
  /** Optionally show the `FormFooter` component. If this is undefined, then the `FormFooter` button will be hidden. */
  buttons?: [ButtonProps] | [ButtonProps, ButtonProps]
  /** Optionally add a custom class name */
  className?: string
  /** Optional prop to add a test id to the Tile for QA testing */
  qaTestId?: string
}

type WithBody = TilePropsBase & {
  /** The body that appears in the center of the `Tile`. */
  body: React.ReactNode
  /** Optional subHeader that appears above the body. */
  subHeader?: string
}

type WithoutBody = TilePropsBase & {
  body?: never
  subHeader?: never
}

export type TileProps = WithBody | WithoutBody

const Tile = ({
  header,
  subHeader,
  body,
  tabIndex,
  menuProps,
  buttons,
  className,
  qaTestId = 'tile',
}: TileProps): React.JSX.Element => {
  const [reRenderView, setReRenderView] = useState(false)

  const Header = () => {
    return (
      <div className={styles.header}>
        <div className={styles.leftHeaderSection}>
          {header.imgUrl ? (
            <Image
              url={header.imgUrl}
              alt={header.title}
              imgStyle={{
                width: 40,
                height: 40,
                borderRadius: '50%',
                objectFit: 'cover',
              }}
            />
          ) : null}
          <div className={styles.headerText}>
            <span className={styles.title}>{header.title}</span>
            {header.subtitle ? (
              <span className={styles.subtitle}>{header.subtitle}</span>
            ) : null}
          </div>
        </div>
        {menuProps ? (
          <DropdownMenu
            actions={menuProps.actions}
            trigger={
              <Button as='unstyled' className={styles.actionButton}>
                <Icon icon='options' />
              </Button>
            }
            popoverProps={{ position: 'left' }}
            reRenderView={() => setReRenderView(!reRenderView)}
          />
        ) : null}
      </div>
    )
  }

  const SubHeader = () => <div className={styles.subHeader}>{subHeader}</div>

  const Body = () => (
    <div>
      {subHeader ? SubHeader() : null}
      <div>{body}</div>
    </div>
  )

  const Footer = () => (
    <div
      className={`${styles.buttonContainer} ${buttons?.length === 2 ? styles.twoButtons : styles.oneButton}`}
    >
      {buttons?.map((button, i) => (
        <React.Fragment key={i}>
          <Button {...button} />
        </React.Fragment>
      ))}
    </div>
  )

  return (
    // This is the main container for the `Tile` component.
    <div
      className={`${styles.tile} ${className}`}
      tabIndex={tabIndex}
      qa-test-id={qaTestId}
    >
      {Header()}
      {body ? Body() : null}
      {buttons ? Footer() : null}
    </div>
  )
}

export default Tile