import { createScope } from '../src'
import { ExampleSection } from './ssr/helpers'
import { theme } from './ssr/themes'

const { define } = createScope('Button')

const Button = define('Root', {
  base: 'button',

  padding: `${theme('spacing-sm')} ${theme('spacing-lg')}`,
  display: "inline-flex",
  alignItems: "center",
  justifyContent: "center",
  gap: theme('spacing-xs'),
  background: theme('colors-accent'),
  color: theme('colors-bg'),
  border: `1px solid ${theme('colors-accent')}`,
  borderRadius: theme('radius-sm'),
  fontSize: 14,
  fontWeight: 400,
  cursor: "pointer",
  transition: "all 0.2s ease",
  userSelect: "none",

  states: {
    ":not(:disabled):hover": {
      background: theme('colors-accentDim'),
      borderColor: theme('colors-accentDim'),
    },
    ":not(:disabled):active": {
      transform: 'translateY(1px)',
    },
  },

  variants: {
    intent: {
      primary: {
        background: theme('colors-accent'),
        color: theme('colors-bg'),
        border: `1px solid ${theme('colors-accent')}`,
      },
      secondary: {
        background: theme('colors-bgElevated'),
        color: theme('colors-fg'),
        border: `1px solid ${theme('colors-border')}`,
        states: {
          ":not(:disabled):hover": {
            borderColor: theme('colors-borderActive'),
          }
        }
      },
      danger: {
        background: "#ff0000",
        color: theme('colors-bg'),
        border: "1px solid #ff0000",
        states: {
          ":not(:disabled):hover": {
            background: "#cc0000",
            borderColor: "#cc0000",
          }
        }
      },
      ghost: {
        background: "transparent",
        color: theme('colors-fgMuted'),
        border: `1px solid ${theme('colors-border')}`,
        states: {
          ":not(:disabled):hover": {
            color: theme('colors-fg'),
            borderColor: theme('colors-borderActive'),
          }
        }
      },
    },
    size: {
      small: {
        padding: `${theme('spacing-xs')} ${theme('spacing-md')}`,
        fontSize: 12,
      },
      large: {
        padding: `${theme('spacing-md')} ${theme('spacing-xl')}`,
        fontSize: 16,
      },
    },
    disabled: {
      opacity: 0.3,
      cursor: "not-allowed",
    },
  },
})

const ButtonRow = define('Row', {
  display: 'flex',
  gap: theme('spacing-md'),
  flexWrap: 'wrap',
  alignItems: 'center',
})

export const ButtonExamplesContent = () => (
  <>
    <ExampleSection title="Intents">
      <ButtonRow>
        <Button intent="primary">Primary</Button>
        <Button intent="secondary">Secondary</Button>
        <Button intent="danger">Danger</Button>
        <Button intent="ghost">Ghost</Button>
      </ButtonRow>
    </ExampleSection >

    <ExampleSection title="Sizes">
      <ButtonRow>
        <Button size="small">Small Button</Button>
        <Button>Medium Button</Button>
        <Button size="large">Large Button</Button>
      </ButtonRow>
    </ExampleSection>

    <ExampleSection title="Sizes">
      <ButtonRow>
        <Button intent="primary" size="small">Small Primary</Button>
        <Button intent="secondary" size="small">Small Secondary</Button>
        <Button intent="danger" size="large">Large Danger</Button>
        <Button intent="ghost" size="large">Large Ghost</Button>
      </ButtonRow>
    </ExampleSection>

    <ExampleSection title="Disabled">
      <ButtonRow>
        <Button disabled>Default Disabled</Button>
        <Button intent="primary" disabled>Primary Disabled</Button>
        <Button intent="secondary" disabled>Secondary Disabled</Button>
        <Button intent="danger" disabled>Danger Disabled</Button>
        <Button intent="ghost" disabled>Ghost Disabled</Button>
      </ButtonRow>
    </ExampleSection>
  </>
)