import { getUrlSearchParams, getUrlSearchString } from '@seamly/web-ui'
import { categories } from '../states'

const StyleGuideLinks = ({ setSelectedState, states, headingLevel }) => {
  const CategoryHeading = `h${headingLevel.toString()}`
  const FeatureHeading = `h${(parseInt(headingLevel, 10) + 1).toString()}`
  const onClickHandler = (actionObj) => {
    window.history.pushState(
      null,
      '',
      `${window.location.pathname}?${getUrlSearchString(actionObj)}`,
    )
    setSelectedState(actionObj)
  }

  const currentSearch = getUrlSearchParams() as {
    layoutMode: string
    feature: string
  }

  return (
    <nav aria-label="Style guide navigation" className="nav--styleguide">
      <ol className="list--styleguidestates">
        {Object.keys(categories).map((category) => {
          const { heading, description } = categories[category]
          const features = Object.keys(states).filter((feature) => {
            const { category: featureCategory } = states[feature]
            return featureCategory === category
          })
          return (
            features.length > 0 && (
              <li key={category}>
                {/* @ts-ignore */}
                <CategoryHeading>{heading}</CategoryHeading>
                <span className="category__description">{description}</span>
                <ol>
                  {features.map((feature) => {
                    const featureState = { ...states[feature] }
                    delete featureState.category
                    const {
                      headingText,
                      descriptionId,
                      description: featureDescription,
                      ...rest
                    } = featureState
                    return (
                      <li key={feature}>
                        {/* @ts-ignore */}
                        <FeatureHeading id={descriptionId}>
                          {headingText}
                        </FeatureHeading>
                        {featureDescription && (
                          <span className="feature__description">
                            {featureDescription}
                          </span>
                        )}
                        <ul className="list--styleguidelayouts">
                          {Object.keys(rest).map((layoutMode) => (
                            <li
                              key={layoutMode}
                              className={
                                layoutMode === currentSearch?.layoutMode &&
                                feature === currentSearch?.feature
                                  ? 'state__selected'
                                  : undefined
                              }
                            >
                              <a
                                aria-describedby={descriptionId}
                                href={`${
                                  window.location.pathname
                                }?${getUrlSearchString({
                                  layoutMode,
                                  feature,
                                })}`}
                                aria-current={
                                  layoutMode === currentSearch?.layoutMode &&
                                  feature === currentSearch?.feature
                                    ? 'page'
                                    : undefined
                                }
                                onClick={(e) => {
                                  e.preventDefault()
                                  if (layoutMode === 'inline') {
                                    const inlineChat =
                                      window.document.querySelector<HTMLDivElement>(
                                        '.chat-inline',
                                      )

                                    if (inlineChat) {
                                      window.scroll({
                                        top: inlineChat.offsetTop,
                                        behavior: 'smooth',
                                      })
                                    }
                                  }
                                  onClickHandler({ layoutMode, feature })
                                }}
                              >
                                {layoutMode.charAt(0).toUpperCase() +
                                  layoutMode.slice(1)}
                              </a>
                            </li>
                          ))}
                        </ul>
                      </li>
                    )
                  })}
                </ol>
              </li>
            )
          )
        })}
      </ol>
    </nav>
  )
}

export default StyleGuideLinks