import React from 'react'
import classnames from 'classnames'

/**
 * The available layout widths for the Layout component.
 *
 * Available options:
 * - inset-left - 5 columns (500 pixels), medium screens and above: 3 columns (300 pixels), float left
 * - inset-right - 5 columns (500 pixels), medium screens and above: 3 columns (300 pixels), float right
 * - `in-line` - [Default] 7 columns (700 pixels)
 * - `full-width` - Legacy alias for `in-line`
 * - `mid-grid` - 9 columns (900 pixels)
 * - `full-grid` - 12 columns of the grid (1200 pixels)
 *
 * @todo Existing layouts not currently supported by this component. To be implemented in the future:
 * @todo `full-bleed` - Edge to edge of the viewport, no padding
 * @todo The terminology in Spark doesn't align with our terminology. For instance, Editorial uses `full-width` that we map to `full-grid`. We should likely move towards an ubiquitous language prioritising the Editorial one.
 */
type LayoutWidth =
  | 'in-line'
  | 'mid-grid'
  | 'full-grid'
  | 'inset-left'
  | 'inset-right'

interface ContentLayoutProps {
  dataLayout?: LayoutWidth
  dataComponent?: string
  className?: string
  children: React.ReactNode
}

/*
 * @description OverflowingLayout component prevent clashes with ads on the RHR (Righthand-rail) and share bar
 * via the usage of data-layout-width='full-grid'
 * See related code here: https://github.com/Financial-Times/next-article/blob/5766d82de6125ffc99fa6e3bc132311b3434f8f0/client/components/share/main.js#L8
 */
const OverflowingLayout: React.FC<{ children: React.ReactNode }> = ({
  children,
}) => (
  <div className="n-content-layout" data-layout-width="full-grid">
    {children}
  </div>
)

const nonOverflowingLayoutModifiers = (dataLayout: LayoutWidth): string => {
  switch (dataLayout) {
    case 'inset-left':
      return '--inset-left'
    case 'inset-right':
      return '--inset-right'
    default:
      return '--in-line'
  }
}
/*
 * @description ContentLayout component is used to fulfill the legacy usage of n-layout.
 * @param dataLayout - The layout type of the content (e.g., 'full-grid', 'mid-grid', etc.).
 * @param dataComponent - The component type used as data-component attribute for client-side targeting.
 */
export const ContentLayout: React.FC<
  React.PropsWithChildren<ContentLayoutProps>
> = ({ dataLayout = 'in-line', children, dataComponent, className = '' }) => {
  const ContainerClassNames = classnames(
    'n-content-layout__container',
    className
  )

  if (dataLayout === 'full-grid') {
    return (
      <OverflowingLayout>
        <div className={ContainerClassNames} data-component={dataComponent}>
          {children}
        </div>
      </OverflowingLayout>
    )
  }

  if (dataLayout === 'mid-grid') {
    return (
      <OverflowingLayout>
        <div className={ContainerClassNames} data-component={dataComponent}>
          <div
            data-o-grid-colspan="12 S12 M12 L10 XL10"
            className="n-content-layout__container--mid-grid"
          >
            {children}
          </div>
        </div>
      </OverflowingLayout>
    )
  }

  return (
    <div
      className={classnames(
        `n-content-layout__container${nonOverflowingLayoutModifiers(
          dataLayout
        )}`
      )}
      data-component={dataComponent}
    >
      {children}
    </div>
  )
}