import createPlugin from 'tailwindcss/plugin'

import { createComponent, registerComponents } from '@graphprotocol/gds-css'
import gdsTailwindPlugin from '@graphprotocol/gds-css/tailwind-plugin'

import { AddressMeta } from './components/Address.meta.ts'
import { AvatarMeta } from './components/Avatar.meta.ts'
import { AvatarGroupMeta } from './components/AvatarGroup.meta.ts'
import { AddonMeta } from './components/base/Addon.meta.ts'
import { CheckableMeta } from './components/base/Checkable.meta.ts'
import { FieldMeta } from './components/base/Field.meta.ts'
import { TransitionMeta } from './components/base/Transition.meta.ts'
import { BreadcrumbsItemMeta, BreadcrumbsMeta } from './components/Breadcrumbs.meta.ts'
import { ButtonMeta } from './components/Button.meta.ts'
import { ButtonGroupMeta } from './components/ButtonGroup.meta.ts'
import { CardMeta } from './components/Card.meta.ts'
import { CheckboxMeta } from './components/Checkbox.meta.ts'
import { ChipGroupMeta, ChipMeta } from './components/Chip.meta.ts'
import { ClusterMeta } from './components/Cluster.meta.ts'
import { CodeBlockMeta, CodeBlockTabsMeta } from './components/CodeBlock.meta.ts'
import { CodeInlineMeta } from './components/CodeInline.meta.ts'
import { CopyButtonMeta } from './components/CopyButton.meta.ts'
import { CurrencyInputMeta } from './components/CurrencyInput.meta.ts'
import { DescriptionListItemMeta, DescriptionListMeta } from './components/DescriptionList.meta.ts'
import { DividerMeta } from './components/Divider.meta.ts'
import { IconMeta } from './components/Icon.meta.ts'
import { InputMeta } from './components/Input.meta.ts'
import { KeyboardMeta } from './components/Keyboard.meta.ts'
import { LabelMeta } from './components/Label.meta.ts'
import { LinkMeta } from './components/Link.meta.ts'
import { MenuItemMeta, MenuMeta } from './components/Menu.meta.ts'
import { ModalMeta } from './components/Modal.meta.ts'
import { OTCInputMeta } from './components/OTCInput.meta.ts'
import { PaneContainerMeta, PaneMeta } from './components/Pane.meta.ts'
import { RadioMeta } from './components/Radio.meta.ts'
import { SearchMeta } from './components/Search.meta.ts'
import {
  SegmentedControlMeta,
  SegmentedControlOptionMeta,
} from './components/SegmentedControl.meta.ts'
import { StatusMeta } from './components/Status.meta.ts'
import { StepperMeta } from './components/Stepper.meta.ts'
import { SwitchMeta } from './components/Switch.meta.ts'
import { TabSetTabMeta, TabSetTabsMeta } from './components/TabSet.meta.ts'
import { TagMeta } from './components/Tag.meta.ts'
import { TextAreaMeta } from './components/TextArea.meta.ts'
import { ToggleButtonMeta } from './components/ToggleButton.meta.ts'
import { TooltipMeta } from './components/Tooltip.meta.ts'

/**
 * Register a dummy component for two reasons:
 *
 * - Define the order in which `@prop-*` variants are generated, and thus sorted by the Prettier
 *   extension (i.e. without this, if the first component with a `size` prop only had `small` and
 *   `medium` values, `xsmall` would be sorted after them).
 * - Allow the Tailwind IntelliSense extension to list `@prop-*` variants even though a modifier is
 *   technically required for them to be valid (one without a modifier will use the dummy
 *   component).
 */
const DummyComponent = createComponent('Dummy', {
  cssProps: {
    variant: {
      type: 'values',
      values: ['inverse', 'primary', 'secondary', 'tertiary', 'danger', 'naked', 'enclosed'],
    },
    size: {
      type: 'values',
      values: ['2xsmall', 'xsmall', 'small', 'medium', 'large', 'xlarge', '2xlarge'],
    },
  },
})

const gdsTailwindPluginWithComponents: ReturnType<typeof createPlugin> = createPlugin((api) => {
  registerComponents([
    DummyComponent,
    AddressMeta,
    AddonMeta,
    AvatarMeta,
    AvatarGroupMeta,
    BreadcrumbsItemMeta,
    BreadcrumbsMeta,
    ButtonMeta,
    ButtonGroupMeta,
    CardMeta,
    CheckableMeta,
    CheckboxMeta,
    ChipMeta,
    ChipGroupMeta,
    ClusterMeta,
    CodeBlockMeta,
    CodeBlockTabsMeta,
    CodeInlineMeta,
    CopyButtonMeta,
    CurrencyInputMeta,
    DescriptionListItemMeta,
    DescriptionListMeta,
    DividerMeta,
    FieldMeta,
    IconMeta,
    InputMeta,
    KeyboardMeta,
    LabelMeta,
    LinkMeta,
    MenuItemMeta,
    MenuMeta,
    ModalMeta,
    OTCInputMeta,
    PaneContainerMeta,
    PaneMeta,
    RadioMeta,
    SearchMeta,
    SegmentedControlMeta,
    SegmentedControlOptionMeta,
    StatusMeta,
    StepperMeta,
    SwitchMeta,
    TabSetTabMeta,
    TabSetTabsMeta,
    TagMeta,
    TextAreaMeta,
    ToggleButtonMeta,
    TooltipMeta,
    TransitionMeta,
  ])
  gdsTailwindPlugin.handler(api)
})

export default gdsTailwindPluginWithComponents
