Tabs

import * as tabs from '@remix-run/ui/tabs'
import { css, on, type CSSMixinDescriptor, type Handle, type Props } from 'remix/component'

export type TabsOrientation = 'horizontal' | 'vertical'
export type TabsListVariant = 'default' | 'line'

export interface TabsProps extends Omit<Props<'div'>, 'defaultValue'> {
  /** The controlled active tab. */
  value?: string
  /** The tab that is active initially when uncontrolled. */
  defaultValue?: string
  onValueChange?: (value: string) => void
  orientation?: TabsOrientation
}

export interface TabsListProps extends Props<'div'> {
  variant?: TabsListVariant
}

export interface TabsTriggerProps extends Omit<Props<'button'>, 'value'> {
  value: string
}

export interface TabsContentProps extends Omit<Props<'div'>, 'value'> {
  value: string
}

interface TabsContextValue {
  readonly orientation: TabsOrientation
}

const tabsStyles = css({
  display: 'flex',
  gap: '0.5rem',
  '&[data-orientation="horizontal"]': { flexDirection: 'column' },
})

const tabsListBase = css({
  display: 'inline-flex',
  width: 'fit-content',
  alignItems: 'center',
  justifyContent: 'center',
  borderRadius: 'var(--radius)',
  padding: '3px',
  color: 'var(--muted-foreground)',
  '[data-slot="tabs"][data-orientation="horizontal"] &': { height: '2.25rem' },
  '[data-slot="tabs"][data-orientation="vertical"] &': {
    height: 'fit-content',
    flexDirection: 'column',
  },
  '&[data-variant="line"]': { borderRadius: 0 },
})

const tabsListVariantStyles: Record<TabsListVariant, CSSMixinDescriptor> = {
  default: css({ backgroundColor: 'var(--muted)' }),
  line: css({ gap: '0.25rem', backgroundColor: 'transparent' }),
}

const lineList = '[data-slot="tabs-list"][data-variant="line"]'

const tabsTriggerStyles = css({
  position: 'relative',
  display: 'inline-flex',
  height: 'calc(100% - 1px)',
  flex: '1 1 0%',
  alignItems: 'center',
  justifyContent: 'center',
  gap: '0.375rem',
  borderRadius: 'calc(var(--radius) - 2px)',
  borderWidth: '1px',
  borderColor: 'transparent',
  paddingInline: '0.5rem',
  paddingBlock: '0.25rem',
  fontSize: '0.875rem',
  lineHeight: 'calc(1.25 / 0.875)',
  fontWeight: 500,
  whiteSpace: 'nowrap',
  color: 'color-mix(in oklab, var(--foreground) 60%, transparent)',
  transitionProperty: 'all',
  transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
  transitionDuration: '150ms',
  boxShadow: 'var(--tw-ring-shadow), var(--tw-shadow)',
  '[data-slot="tabs"][data-orientation="vertical"] &': {
    width: '100%',
    justifyContent: 'flex-start',
  },
  '&:hover': { color: 'var(--foreground)' },
  '&:focus-visible': {
    borderColor: 'var(--ring)',
    '--tw-ring-shadow':
      '0 0 0 3px var(--tw-ring-color, color-mix(in oklab, var(--ring) 50%, transparent))',
    outlineStyle: 'solid',
    outlineWidth: '1px',
    outlineColor: 'var(--ring)',
  },
  '&:disabled': { pointerEvents: 'none', opacity: 0.5 },
  '[data-slot="tabs-list"][data-variant="default"] &[data-state="active"]': {
    '--tw-shadow': '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
  },
  '.dark &': { color: 'var(--muted-foreground)' },
  '.dark &:hover': { color: 'var(--foreground)' },
  '& svg': { pointerEvents: 'none', flexShrink: 0 },
  '& svg:not([class*="size-"])': { width: '1rem', height: '1rem' },
  [`${lineList} &`]: { backgroundColor: 'transparent' },
  '&[data-state="active"]': {
    backgroundColor: 'var(--background)',
    color: 'var(--foreground)',
  },
  '.dark &[data-state="active"]': {
    borderColor: 'var(--input)',
    backgroundColor: 'color-mix(in oklab, var(--input) 30%, transparent)',
    color: 'var(--foreground)',
  },
  [`${lineList} &[data-state="active"]`]: {
    '--tw-shadow': '0 0 #0000',
    backgroundColor: 'transparent',
  },
  [`.dark ${lineList} &[data-state="active"]`]: {
    borderColor: 'transparent',
    backgroundColor: 'transparent',
  },
  '&::after': {
    content: '""',
    position: 'absolute',
    backgroundColor: 'var(--foreground)',
    opacity: 0,
    transitionProperty: 'opacity',
    transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
    transitionDuration: '150ms',
  },
  '[data-slot="tabs"][data-orientation="horizontal"] &::after': {
    insetInline: 0,
    bottom: '-5px',
    height: '0.125rem',
  },
  '[data-slot="tabs"][data-orientation="vertical"] &::after': {
    insetBlock: 0,
    right: '-0.25rem',
    width: '0.125rem',
  },
  [`${lineList} &[data-state="active"]::after`]: { opacity: 1 },
})

const tabsContentStyles = css({ flex: '1 1 0%', outlineStyle: 'none' })

/** The `tabsListVariants()` of shadcn/ui as a mix. */
export function tabsListVariants({ variant = 'default' }: { variant?: TabsListVariant } = {}) {
  return [tabsListBase, tabsListVariantStyles[variant]]
}

export function Tabs(handle: Handle<TabsProps, TabsContextValue>) {
  handle.context.set({
    get orientation() {
      return handle.props.orientation ?? 'horizontal'
    },
  })

  return () => {
    let {
      value,
      defaultValue,
      onValueChange,
      orientation = 'horizontal',
      children,
      mix,
      ...props
    } = handle.props
    return (
      <tabs.Context
        activeTab={value}
        defaultActiveTab={defaultValue}
        onActiveTabChange={onValueChange}
      >
        <div
          data-slot="tabs"
          data-orientation={orientation}
          {...props}
          mix={[tabsStyles, tabs.root(), mix]}
        >
          {children}
        </div>
      </tabs.Context>
    )
  }
}

export function TabsList(handle: Handle<TabsListProps>) {
  let context = handle.context.get(Tabs)

  return () => {
    let { variant = 'default', mix, ...props } = handle.props
    let orientation = context.orientation
    return (
      <div
        data-slot="tabs-list"
        data-variant={variant}
        data-orientation={orientation}
        aria-orientation={orientation}
        {...props}
        mix={[
          tabsListVariants({ variant }),
          tabs.list(),
          // Radix only moves along the list's axis: horizontal tabs ignore Up/Down.
          on(
            'keydown',
            (event) => {
              let ignored =
                orientation === 'horizontal'
                  ? event.key === 'ArrowUp' || event.key === 'ArrowDown'
                  : event.key === 'ArrowLeft' || event.key === 'ArrowRight'
              if (ignored) event.stopPropagation()
            },
            true,
          ),
          mix,
        ]}
      />
    )
  }
}

export function TabsTrigger(handle: Handle<TabsTriggerProps>) {
  let context = handle.context.get(Tabs)

  return () => {
    let { value, disabled, mix, ...props } = handle.props
    return (
      <button
        data-slot="tabs-trigger"
        data-orientation={context.orientation}
        data-disabled={disabled ? '' : undefined}
        disabled={disabled}
        {...props}
        mix={[tabsTriggerStyles, tabs.tab({ name: value, disabled }), mix]}
      />
    )
  }
}

export function TabsContent(handle: Handle<TabsContentProps>) {
  let context = handle.context.get(Tabs)

  return () => {
    let { value, mix, ...props } = handle.props
    return (
      <div
        data-slot="tabs-content"
        data-orientation={context.orientation}
        tabIndex={0}
        {...props}
        mix={[tabsContentStyles, tabs.panel({ name: value }), mix]}
      />
    )
  }
}