import { BoxProps } from '../box'
import { ThemingProps } from '../theme'

/** Column consists of one ore more sections with a heading and links. */
export type FooterColumnData = FooterSectionData[]

export type FooterColumnProps = BoxProps & {
  /** Data structure for sections and links */
  sections?: FooterSectionData[]
}

export type FooterContentProps = BoxProps

export type FooterContext = Pick<FooterProps, 'size' | 'variant'>

/** Link includes the label text and URL address. */
export type FooterLinkData = {
  /** Unique name that identifies a link in the links dictionary. */
  id?: string
  text: string
  url?: string
  items?: FooterLinkData[]
}

export type FooterProps = Omit<BoxProps, 'size' | 'variant'> &
  ThemingProps<'Footer'> &
  Pick<FooterTrademarkProps, 'linkedIn'> & {
    applicationLinks?: FooterLinkData[]
    applicationSocialLinks?: FooterLinkData[]
    applicationStaticItems?: string[]
    /** Data defining content of multiple columns. */
    columns?: FooterColumnData[]
    isApplication?: boolean
    isSlim?: boolean
    isDNV?: boolean
  }

export type ApplicationFooterProps = Omit<FooterProps, 'isApplication' | 'isSlim'> & {}

/** Section consists of multiple links with text (label) and url */
export type FooterSectionData = {
  heading?: string
  /** Array of objects defining each link. */
  links?: FooterLinkData[]
}

export type FooterSectionProps = BoxProps & {
  /** Socket for a heading on top of the section. */
  heading?: FooterSectionData['heading'] | JSX.Element
  /** Socket for a list of links below the heading. */
  links?: FooterSectionData['links'] | JSX.Element
}

export type FooterTrademarkProps = BoxProps & {
  /** Url provided to the LinkedIn icon in the Trademark section. */
  linkedIn?: string
}
