Accordion

import * as accordion from '@remix-run/ui/accordion'
import { css, ref, type Handle, type Props } from 'remix/component'

import { ChevronDownIcon } from './icons.tsx'

interface AccordionBaseProps extends Omit<Props<'div'>, 'defaultValue'> {
  disabled?: boolean
}

export interface AccordionSingleProps extends AccordionBaseProps {
  type: 'single'
  /** The controlled open item; `""` when none is open. */
  value?: string
  defaultValue?: string
  onValueChange?: (value: string) => void
  /** Allow closing the open item by clicking its trigger. */
  collapsible?: boolean
}

export interface AccordionMultipleProps extends AccordionBaseProps {
  type: 'multiple'
  value?: string[]
  defaultValue?: string[]
  onValueChange?: (value: string[]) => void
}

export type AccordionProps = AccordionSingleProps | AccordionMultipleProps

export interface AccordionItemProps extends Props<'div'> {
  value: string
  disabled?: boolean
}

const accordionItemStyles = css({
  borderBottomWidth: '1px',
  '&:last-child': { borderBottomWidth: 0 },
})

const accordionHeaderStyles = css({ display: 'flex' })

const accordionTriggerStyles = css({
  display: 'flex',
  flex: '1 1 0%',
  alignItems: 'flex-start',
  justifyContent: 'space-between',
  gap: '1rem',
  borderRadius: 'calc(var(--radius) - 2px)',
  paddingBlock: '1rem',
  textAlign: 'left',
  fontSize: '0.875rem',
  lineHeight: 'calc(1.25 / 0.875)',
  fontWeight: 500,
  transitionProperty: 'all',
  transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
  transitionDuration: '150ms',
  outlineStyle: 'none',
  boxShadow: 'var(--tw-ring-shadow), var(--tw-shadow)',
  '&:hover': { textDecorationLine: 'underline' },
  '&:focus-visible': {
    borderColor: 'var(--ring)',
    '--tw-ring-shadow':
      '0 0 0 3px var(--tw-ring-color, color-mix(in oklab, var(--ring) 50%, transparent))',
  },
  '&:disabled': { pointerEvents: 'none', opacity: 0.5 },
  '&[data-state="open"] > svg': { rotate: '180deg' },
})

const accordionChevronStyles = css({
  pointerEvents: 'none',
  width: '1rem',
  height: '1rem',
  flexShrink: 0,
  translate: '0 0.125rem',
  color: 'var(--muted-foreground)',
  transitionProperty: 'transform, translate, scale, rotate',
  transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
  transitionDuration: '200ms',
})

const accordionContentStyles = css({
  overflow: 'hidden',
  fontSize: '0.875rem',
  lineHeight: 'calc(1.25 / 0.875)',
  '&[data-state="closed"]': {
    height: 0,
    animation: 'shadcn-accordion-up 200ms ease-out',
  },
  '&[data-state="open"]': { animation: 'shadcn-accordion-down 200ms ease-out' },
  '@keyframes shadcn-accordion-down': {
    from: { height: 0 },
    to: { height: 'var(--radix-accordion-content-height, auto)' },
  },
  '@keyframes shadcn-accordion-up': {
    from: { height: 'var(--radix-accordion-content-height, auto)' },
    to: { height: 0 },
  },
})

const accordionContentInnerStyles = css({ paddingTop: 0, paddingBottom: '1rem' })

export function Accordion(handle: Handle<AccordionProps>) {
  return () => {
    let props = handle.props
    let content = (
      <div
        data-slot="accordion"
        data-orientation="vertical"
        {...omitAccordionProps(props)}
        mix={[accordion.root(), props.mix]}
      />
    )

    if (props.type === 'multiple') {
      return (
        <accordion.Context
          type="multiple"
          value={props.value}
          defaultValue={props.defaultValue}
          onValueChange={props.onValueChange}
          disabled={props.disabled}
        >
          {content}
        </accordion.Context>
      )
    }

    let { value, defaultValue, onValueChange } = props
    return (
      <accordion.Context
        type="single"
        value={value === undefined ? undefined : value || null}
        defaultValue={defaultValue || null}
        onValueChange={onValueChange && ((next) => onValueChange(next ?? ''))}
        collapsible={props.collapsible ?? false}
        disabled={props.disabled}
      >
        {content}
      </accordion.Context>
    )
  }
}

function omitAccordionProps(props: AccordionProps): Props<'div'> {
  let { type, value, defaultValue, onValueChange, disabled, mix, ...rest } = props as AccordionSingleProps
  let { collapsible, ...domProps } = rest
  return domProps
}

export function AccordionItem(handle: Handle<AccordionItemProps>) {
  return () => {
    let { value, disabled, mix, ...props } = handle.props
    return (
      <accordion.ItemContext value={value} disabled={disabled}>
        <div
          data-slot="accordion-item"
          data-orientation="vertical"
          {...props}
          mix={[accordionItemStyles, accordion.item(), mix]}
        />
      </accordion.ItemContext>
    )
  }
}

export function AccordionTrigger(handle: Handle<Props<'button'>>) {
  let item = handle.context.get(accordion.ItemContext)

  return () => {
    let { children, mix, ...props } = handle.props
    return (
      <h3
        data-orientation="vertical"
        data-state={item.open ? 'open' : 'closed'}
        data-disabled={item.disabled ? '' : undefined}
        mix={accordionHeaderStyles}
      >
        <button
          type="button"
          data-slot="accordion-trigger"
          data-orientation="vertical"
          data-disabled={item.disabled ? '' : undefined}
          {...props}
          mix={[accordionTriggerStyles, accordion.trigger(), mix]}
        >
          {children}
          <ChevronDownIcon mix={accordionChevronStyles} />
        </button>
      </h3>
    )
  }
}

export function AccordionContent(handle: Handle<Props<'div'>>) {
  let item = handle.context.get(accordion.ItemContext)
  let node: HTMLDivElement | undefined
  let wasOpen: boolean | undefined
  // Like Radix, the open/close animation is suppressed until the item is first toggled, so items
  // that render open (or closed) don't animate on page load.
  let animate = false

  return () => {
    let { children, mix, style, ...props } = handle.props
    if (wasOpen !== undefined && wasOpen !== item.open) {
      animate = true
      handle.queueTask(() => {
        node?.style.setProperty('--radix-accordion-content-height', `${node.scrollHeight}px`)
      })
    }
    wasOpen = item.open

    return (
      <div
        data-slot="accordion-content"
        role="region"
        data-orientation="vertical"
        {...props}
        style={animate || typeof style === 'string' ? style : { ...style, animationName: 'none' }}
        mix={[accordionContentStyles, accordion.content(), ref((el: HTMLDivElement) => (node = el))]}
      >
        <div mix={[accordionContentInnerStyles, mix]}>
          {children}
        </div>
      </div>
    )
  }
}