import { Show, children } from 'solid-js'
import * as StyledNumberInput from './styled/number-input'

export interface NumberInputProps extends StyledNumberInput.RootProps {}

export const NumberInput = (props: NumberInputProps) => {
  const getChildren = children(() => props.children)

  return (
    <StyledNumberInput.Root {...props}>
      <Show when={getChildren()}>
        <StyledNumberInput.Label>{getChildren()}</StyledNumberInput.Label>
      </Show>
      <StyledNumberInput.Control>
        <StyledNumberInput.Input />
        <StyledNumberInput.IncrementTrigger>
          <ChevronUpIcon />
        </StyledNumberInput.IncrementTrigger>
        <StyledNumberInput.DecrementTrigger>
          <ChevronDownIcon />
        </StyledNumberInput.DecrementTrigger>
      </StyledNumberInput.Control>
    </StyledNumberInput.Root>
  )
}

const ChevronUpIcon = () => (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <title>Chevron Up Icon</title>
    <path
      fill="none"
      stroke="currentColor"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="2"
      d="m18 15l-6-6l-6 6"
    />
  </svg>
)

const ChevronDownIcon = () => (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <title>Chevron Down Icon</title>
    <path
      fill="none"
      stroke="currentColor"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="2"
      d="m6 9l6 6l6-6"
    />
  </svg>
)