import React from 'react';
import styled from 'styled-components';

import type { ResolvedNavItem } from '@redocly/config';

import { FooterItem } from '@redocly/theme/components/Footer/FooterItem';
import { breakpoints, isNavLinkItem } from '@redocly/theme/core/utils';
import { useThemeHooks } from '@redocly/theme/core/hooks';
import { Link } from '@redocly/theme/components/Link/Link';

export type FooterColumnProps = {
  column: ResolvedNavItem;
  className?: string;
};

export function FooterColumn({ column, className }: FooterColumnProps): JSX.Element {
  const { useTranslate } = useThemeHooks();
  const { translate } = useTranslate();
  const { items = [] } = column;

  const iconsOnly = items.every((item) => item.label === item.link && (item.icon || item.srcSet));
  const label = translate(column.labelTranslationKey, column.label);

  return (
    <FooterColumnWrapper data-component-name="Footer/FooterColumn" className={className}>
      <FooterColumnTitle>
        {isNavLinkItem(column) ? (
          <Link to={column.link} external={column.external} target={column.target}>
            {label}
          </Link>
        ) : (
          label
        )}
      </FooterColumnTitle>
      <FooterColumnItems iconsOnly={iconsOnly}>
        {items?.map((columnItem, columnItemIndex) => (
          <FooterItem item={columnItem} iconsOnly={iconsOnly} key={columnItemIndex} />
        ))}
      </FooterColumnItems>
    </FooterColumnWrapper>
  );
}

const FooterColumnWrapper = styled.div`
  display: flex;
  flex: 1;
  position: relative;
  flex-direction: column;
  text-align: center;
  word-break: break-word;
  min-width: var(--footer-column-min-width);
  align-content: center;
  flex-wrap: wrap;
  gap: var(--footer-column-title-gap);

  @media screen and (min-width: ${breakpoints.small}) {
    text-align: left;
    &:not(:last-child) {
      &::after {
        content: '';
        position: absolute;
        display: block;
        width: 1px;
        height: 100%;
        background-color: var(--footer-column-divider-color);
        right: calc(0px - var(--footer-column-gap) / 2);
      }
    }
  }
`;

const FooterColumnTitle = styled.div`
  display: inline-block;
  font-weight: var(--footer-title-font-weight);
  font-size: var(--footer-title-font-size);
  margin-top: 0;
  color: var(--footer-title-text-color);
  margin-bottom: 0;

  a {
    text-decoration: none;
    color: var(--footer-title-text-color);

    &:hover {
      color: var(--footer-title-text-color-hover);
    }
  }
`;

const FooterColumnItems = styled.div<{ iconsOnly: boolean }>`
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: ${(props) => (props.iconsOnly ? 'row' : 'column')};

  @media screen and (min-width: ${breakpoints.small}) {
    justify-content: flex-start;
  }
`;