import React, { useId } from 'react'
import { View } from '../view'
import { Text } from '../text'
import { Button } from '../button'
import { useLocale } from '../locale/index.js'

const inputStyles = `
  [data-component="input"] {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    padding: var(--space-s, 8px) var(--space-m, 16px);
    border-width: 1px;
    border-style: solid;
    border-color: var(--separator-primary);
    border-radius: var(--roundness-rounded, 99999px);
    font-size: var(--text-default-font-size, 16px);
    font-family: var(--text-default-font-family, sans-serif);
    font-weight: var(--text-default-font-weight, 400);
    line-height: 1;
    color: var(--text-default-color, CanvasText);
    background-color: var(--surface-primary);
    box-shadow: none;
  }

  [data-component="input"]::placeholder {
    color: color-mix(in srgb, var(--text-default-color) 42%, transparent);
  }

  [data-component="input"]:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 1px var(--color-accent);
  }

  [data-component="input"]:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    color: color-mix(in srgb, var(--text-default-color) 65%, transparent);
    background-color: color-mix(in srgb, var(--surface-primary) 80%, transparent);
    border-color: var(--separator-primary);
  }
`

export const Input = ({ placeholder, 'aria-label': ariaLabel, ...props }) => {
  const { t } = useLocale()
  return (
  <>
    <style href="@ossy/design-system/input" precedence='high'>
    {inputStyles}
    </style>
    <input
      data-component="input"
      placeholder={placeholder != null ? t(placeholder) : undefined}
      aria-label={ariaLabel != null ? t(ariaLabel) : undefined}
      {...props}
    />
  </>
  )
}

export const InputTitle = ({ variant = 'breadcrumb', ...props }) => (
  <>
    <style href={`@ossy/design-system/input-title/${variant}`} precedence='high'>
    {`
      [data-component="input-title"][data-input-title-variant="${variant}"] {
        box-sizing: border-box;
        max-width: 100%;
        min-width: 0;
        font-family: var(--text-${variant}-font-family, var(--text-default-font-family, sans-serif));
        line-height: var(--text-${variant}-line-height, 1);
        font-size: var(--text-${variant}-font-size, 18px);
        font-weight: var(--text-${variant}-font-weight, 500);
        letter-spacing: var(--text-${variant}-letter-spacing, 0);
        color: var(--text-${variant}-color, var(--text-default-color));
        border: none;
        background-color: transparent;
      }

      [data-component="input-title"][data-input-title-variant="${variant}"]::placeholder {
        color: color-mix(in srgb, var(--text-default-color) 45%, transparent);
      }

      [data-component="input-title"][data-input-title-variant="${variant}"]:focus {
        outline: none;
      }
    `}
    </style>
    <input data-component="input-title" data-input-title-variant={variant} {...props}/>
  </>
)

export const Textarea = props => (
  <>
    <style href="@ossy/design-system/textarea" precedence='high'>
    {`
      [data-component="textarea"] {
        box-sizing: border-box;
        height: 120px;
        width: 100%;
        max-width: 100%;
        font-family: var(--text-default-font-family, sans-serif);
        padding: var(--space-s, 8px) var(--space-m, 16px);
        border-width: 1px;
        border-style: solid;
        border-color: var(--separator-primary);
        border-radius: var(--space-m, 16px);
        font-size: var(--text-default-font-size, 16px);
        font-weight: var(--text-default-font-weight, 400);
        line-height: var(--text-default-line-height, 1.5);
        color: var(--text-default-color, CanvasText);
        background-color: var(--surface-primary);
        resize: vertical;
      }

      [data-component="textarea"]::placeholder {
        color: color-mix(in srgb, var(--text-default-color) 42%, transparent);
      }
      
      [data-component="textarea"]:focus {
        outline: none;
        border-color: var(--color-accent);
        box-shadow: 0 0 0 1px var(--color-accent);
      }

      [data-component="textarea"]:disabled {
        cursor: not-allowed;
        opacity: 0.55;
        color: color-mix(in srgb, var(--text-default-color) 65%, transparent);
        background-color: color-mix(in srgb, var(--surface-primary) 80%, transparent);
      }
    `}
    </style>
    <textarea data-component="textarea" {...props}/>
  </>
)

export const Select = props => (
  <>
  <style href="@ossy/design-system/input" precedence='high'>
    {inputStyles}
    </style>
    <select data-component="input" {...props}/>
  </>
)

export const UploadInput = ({
  id,
  name,
  icon = 'math-plus',
  text,
  surface = 'primary',
  style = {},
  accept,
  disabled,
  required,
  ...props
}) => {
  const { t } = useLocale()
  const generatedId = useId()
  const label = text ?? t('design-system.upload.label')
  const inputId = id ?? name ?? generatedId

  // Use label htmlFor only — do not also call input.click() (that opens the picker twice).
  return (
    <>
      <View
        as="label"
        htmlFor={disabled ? undefined : inputId}
        selectable={!disabled}
        surface={surface}
        inset="l"
        roundness="m"
        gap="s"
        style={{
          justifyContent: 'center',
          alignItems: 'center',
          opacity: disabled ? 0.55 : 1,
          cursor: disabled ? 'not-allowed' : 'pointer',
          ...style,
        }}
      >
        <Button as="span" prefix={icon} variant="cta" style={{ padding: 'var(--space-m)' }} disabled={disabled} />
        <Text>{label}</Text>
      </View>
      <input
        id={inputId}
        name={name}
        type="file"
        accept={accept}
        disabled={disabled}
        required={required}
        style={{ display: 'none' }}
        {...props}
      />
    </>
  )
}

/** @deprecated Use {@link UploadInput} */
export const Upload = UploadInput