import React from 'react'
import PropTypes from 'prop-types'
import { ExpandCollapse } from '../ExpandCollapse/ExpandCollapse'
import { ExpandCollapsePanel } from '../ExpandCollapse/ExpandCollapsePanel'
import { getTokensPropType } from '../utils/props/tokens'
import { selectSystemProps } from '../utils/props/selectSystemProps'
import { contentfulProps } from '../utils/props/contentfulProps'
import { useUniqueId } from '../utils/useUniqueId'
import { variantProp } from '../utils/props/variantProp'
import { ExpandCollapseMiniControl } from './ExpandCollapseMiniControl'

const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([contentfulProps])

const alignMap = {
  start: 'flex-start',
  middle: 'center',
  end: 'flex-end'
}

export const ExpandCollapseMini = React.forwardRef(
  (
    {
      children,
      onToggle = () => {},
      tokens = {},
      nativeID,
      initialOpen = false,
      dataSet,
      align,
      ...rest
    },
    ref
  ) => {
    const expandCollapeMiniPanelId = useUniqueId('ExpandCollapseMiniPanel')
    const handleChange = (openPanels, event) => {
      if (typeof onToggle === 'function') {
        const isOpen = openPanels.length > 0
        onToggle(event, isOpen)
      }
    }

    return (
      <ExpandCollapse
        onChange={handleChange}
        tokens={tokens}
        initialOpen={initialOpen ? [expandCollapeMiniPanelId] : []}
        {...selectContainerProps(rest)}
        dataSet={dataSet}
      >
        {(expandProps) => (
          <ExpandCollapsePanel
            {...expandProps}
            panelId={expandCollapeMiniPanelId}
            variant={{ mini: true }}
            controlTokens={{
              // Remove unwanted look and feel from ExpandCollapse(background pressed, focus border and text underline)
              icon: null,
              borderColor: 'transparent',
              textLine: tokens.textLine ?? 'none',
              backgroundColor: 'transparent'
            }}
            controlAlign={align && alignMap[align]}
            // TODO refactor
            // eslint-disable-next-line react/no-unstable-nested-components
            control={(pressableState) => (
              <ExpandCollapseMiniControl pressableState={pressableState} align={align} {...rest} />
            )}
            controlRef={ref}
            nativeID={nativeID}
          >
            {children}
          </ExpandCollapsePanel>
        )}
      </ExpandCollapse>
    )
  }
)
ExpandCollapseMini.displayName = 'ExpandCollapseMini'

ExpandCollapseMini.propTypes = {
  ...ExpandCollapseMiniControl.propTypes,
  ...selectedContainerPropTypes,
  /**
   * Function to call on pressing the panel's control, which should open or close the panel.
   */
  onToggle: PropTypes.func,
  /**
   * ID for DOM element on web
   */
  nativeID: PropTypes.string,
  /**
   * Children nodes that can be added
   */
  children: PropTypes.node.isRequired,
  /**
   * Controls if the panel and the content is opened by default on the first load
   */
  initialOpen: PropTypes.bool,
  /**
   * Optional variant object to override the default theme tokens
   */
  tokens: getTokensPropType('ExpandCollapseMini'),
  /**
   * ExpandCollapseMini variant.
   */
  variant: variantProp.propType,
  /**
   * The dataSet prop allows to pass data-* attributes element to the component.
   */
  dataSet: PropTypes.object,
  /**
   * Controls the horizontal alignment of the trigger label and icon within the panel width.
   */
  align: PropTypes.oneOf(['start', 'middle', 'end'])
}