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

export interface ExpanderProps extends React.PropsWithChildren {
  /** The initial state of the expander */
  state?: 'expanded' | 'collapsed'
  /** The label for the Expand CTA */
  expandLabel?: string
  /** The label for the collapse CTA */
  collapseLabel?: string
  /** Show the expander only on mobile resolutions  */
  onlyMobile?: boolean
  /** Id of the component */
  id: string
}
// React functional component with children
export const ExpanderServer: React.FC<ExpanderProps> = ({
  state = 'collapsed', // default value for "state
  children,
  id,
  expandLabel = 'Expand',
  collapseLabel = 'Collapse',
  onlyMobile = false,
}) => {
  return (
    <div
      className={classnames({
        'cp-expander': true,
        'cp-expander--mobile-only': onlyMobile,
        'cp-expander--all-resolutions': !onlyMobile,
        'cp-expander--not-initialised': true,
      })}
      data-component="expander"
      data-state={state}
      id={`${id}__container`}
    >
      <div id={id} className="cp-expander-content">
        {children}
        <div className="cp-expander__expand">
          <a
            data-trackable="truncated-post"
            data-trackable-context-truncated-post="expand"
            data-trackable-context-truncated-id={id}
            className="cp-expander__link"
            href={`#${id}`}
            aria-expanded={state === 'expanded' ? true : false}
            aria-controls={id}
            aria-hidden={state === 'expanded' ? true : false}
            data-action="expand"
          >
            {expandLabel}
          </a>
        </div>
        <div className="cp-expander__collapse">
          <a
            data-trackable="truncated-post"
            data-trackable-context-truncated-post="collapse"
            data-trackable-context-truncated-id={id}
            href={`#${id}__container`}
            className="cp-expander__link"
            aria-expanded={state === 'expanded' ? true : false}
            aria-controls={id}
            aria-hidden={state === 'expanded' ? false : true}
            data-action="collapse"
          >
            {collapseLabel}
          </a>
        </div>
      </div>
    </div>
  )
}

export default ExpanderServer