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

const { define } = createScope('Button')

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

  padding: `${theme.spacing.sm}px ${theme.spacing.lg}px`,
  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}px ${theme.spacing.md}px`,
        fontSize: 12,
      },
      large: {
        padding: `${theme.spacing.md}px ${theme.spacing.xl}px`,
        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>
  </>
)