import React from 'react'
import PropTypes from 'prop-types'
import {
  ExpandCollapse as ExpandCollapseBase,
  IconButton,
  useThemeTokensCallback
} from '@telus-uds/components-base'
import styled from 'styled-components'

const ExpandCollapseControl = styled.div({
  alignItems: 'center',
  cursor: 'pointer',
  display: 'flex',
  flex: 1,
  justifyContent: 'flex-start'
})

const ExpandCollapseIconContainer = styled.div(({ tokens }) => ({
  alignItems: tokens.expandIconContainerAlignItems,
  justifyContent: tokens.expandIconContainerJustifyContent,
  marginLeft: `${tokens.expandIconContainerMarginY}px`,
  marginRight: `${tokens.expandIconContainerMarginY}px`,
  width: tokens.expandIconContainerWidth
}))

const ExpandCollapseTitle = styled.h4(({ tokens }) => ({
  color: tokens.expandTitleColor,
  fontFamily: `${tokens.expandTitleFontName}${tokens.expandTitleFontWeight}normal`,
  fontSize: tokens.expandTitleFontSize,
  lineHeight: tokens.expandTitleLineHeight,
  margin: `${tokens.expandTitleMarginX}px ${tokens.expandTitleMarginY}px`
}))

const getIconButtonTokens = ({
  icon,
  iconBackgroundColor,
  iconBorderColor,
  iconColor,
  iconOuterBorderColor,
  iconOuterBorderGap,
  iconOuterBorderWidth
}) => ({
  icon,
  backgroundColor: iconBackgroundColor,
  borderColor: iconBorderColor,
  iconColor,
  outerBorderColor: iconOuterBorderColor,
  outerBorderGap: iconOuterBorderGap,
  outerBorderWidth: iconOuterBorderWidth
})

const ExpandCollapse = React.forwardRef(
  ({ children, collapseTitle, expandTitle = collapseTitle, expandLabel, collapseLabel }, ref) => {
    const getTokens = useThemeTokensCallback('TermsAndConditions', {}, {})
    const {
      expandBaseBorderWidth,
      expandContentPaddingBottom,
      expandContentPaddingLeft,
      expandContentPaddingRight,
      expandContentPaddingTop,
      contentBorderColor,
      contentMarginBottom,
      headerBackgroundColor,
      expandTitlePaddingLeft,
      expandTitleBorder,
      expandTitleBorderColor,
      expandTitleUnderline
    } = getTokens()
    return (
      <ExpandCollapseBase
        tokens={{
          borderWidth: expandBaseBorderWidth
        }}
      >
        {(expandProps) => (
          <ExpandCollapseBase.Panel
            {...expandProps}
            panelId="ExpandCollapsePanel"
            controlTokens={{
              icon: null,
              backgroundColor: 'transparent',
              paddingLeft: expandTitlePaddingLeft,
              borderColor: expandTitleBorderColor,
              borderWidth: expandTitleBorder,
              textLine: expandTitleUnderline
            }}
            // TODO refactor
            // eslint-disable-next-line react/no-unstable-nested-components
            control={(pressableState) => {
              const { expanded } = pressableState || {}
              const iconTokens = getIconButtonTokens(getTokens(pressableState || {}))
              const label = expanded ? collapseLabel : expandLabel

              return (
                <ExpandCollapseControl ref={ref}>
                  <ExpandCollapseIconContainer tokens={getTokens()}>
                    {/*
                      Can use `Icon` instead of `IconButton` but `Icon` does not have required stylistic variants 
                      Setting `accessibilityRole` to `none` for `IconButton` to render as a `div` instead of `button` to avoid nested `buttons`
                    */}
                    <IconButton
                      variant={{ size: 'small' }}
                      tokens={iconTokens}
                      focusable={false}
                      accessibilityLabel={label}
                      accessibilityRole="none"
                    />
                  </ExpandCollapseIconContainer>
                  <ExpandCollapseTitle tokens={getTokens()}>
                    {expanded ? expandTitle : collapseTitle}
                  </ExpandCollapseTitle>
                </ExpandCollapseControl>
              )
            }}
            tokens={{
              contentPaddingBottom: expandContentPaddingBottom,
              contentPaddingLeft: expandContentPaddingLeft,
              contentPaddingRight: expandContentPaddingRight,
              contentPaddingTop: expandContentPaddingTop,
              contentPanelBackgroundColor: headerBackgroundColor,
              borderColor: contentBorderColor,
              marginBottom: contentMarginBottom
            }}
          >
            {children}
          </ExpandCollapseBase.Panel>
        )}
      </ExpandCollapseBase>
    )
  }
)

ExpandCollapse.displayName = 'ExpandCollapse'

ExpandCollapse.propTypes = {
  children: PropTypes.node.isRequired,
  collapseTitle: PropTypes.string.isRequired,
  expandTitle: PropTypes.string,
  collapseLabel: PropTypes.string,
  expandLabel: PropTypes.string
}

export default ExpandCollapse