import cx from 'classnames'

/**
 * Example:
 * ```tsx
 * <Checkbox id="checkbox" />
 * ```
 */
export function Checkbox({ id }: { id: string }) {
  return (
    <div className="relative">
      <input type="checkbox" className="peer absolute z-[10] h-[12px] w-[12px] opacity-0" id={id} />
      <div className="h-[12px] w-[12px] rounded-[2px] bg-gradient-to-b from-[#808080] to-[#434343] p-px shadow-[0px_1px_1px_1px_#2B2B2B] peer-active:from-[#6B6B6B] peer-active:to-[#5E5E5E]"></div>
      <div className="top-px left-px absolute z-[5] h-[10px] w-[10px] bg-gradient-to-b from-[#606060] to-[#3D3D3D] peer-active:from-[#525252] peer-active:to-[#5C5C5C]"></div>
      <img src="data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='8.06066' y1='13.9393' x2='14.0607' y2='19.9393' stroke='white' stroke-width='3'/%3E%3Cline x1='11.9765' y1='19.9034' x2='26.9765' y2='5.90342' stroke='white' stroke-width='3'/%3E%3C/svg%3E" width="14" height="14" className="absolute -top-px -left-px hidden h-[14px] min-h-[14px] w-[14px] min-w-[14px] select-none peer-checked:block z-[8]" />
    </div>
  )
}

/**
 * Example:
 * ```tsx
 * <LabelCheckbox>
 *   <Checkbox id="checkbox" />
 *   <CheckboxLabel htmlFor="checkbox">Label</CheckboxLabel>
 * </LabelCheckbox>
 * ```
 */
export function LabeledCheckbox({ children }: React.PropsWithChildren) {
  return (
    <div className="flex items-center gap-1.5">
      {children}
    </div>
  )
}

/**
 * Example:
 * ```tsx
 * <LabelCheckbox>
 *   <Checkbox id="checkbox" />
 *   <CheckboxLabel htmlFor="checkbox">Label</CheckboxLabel>
 * </LabelCheckbox>
 * ```
 */
export function CheckboxLabel({ htmlFor, children }: React.PropsWithChildren<{
  htmlFor: string
}>) {
  return (
    <label htmlFor={htmlFor} className="select-none font-[Inter] text-sm text-[#B4B4B4]">
      {children}
    </label>
  )
}

/**
 * Example:
 * ```tsx
 * <Button>Add component</Button>
 * ```
 */
export function Button({ children, className, ...props }: React.PropsWithChildren<{
  className?: string
}> & React.ComponentProps<'button'>) {
  return (
    <button className={cx('rounded-[4px] bg-gradient-to-b from-[#808080] to-[#434343] p-px shadow-[0px_1px_1px_1px_#2B2B2B] group active:from-[#666666] active:to-[#5A5A5A]', className)} {...props}>
      <div className="rounded-[3px] bg-gradient-to-b from-[#5E5E5E] to-[#3C3C3C] px-12 py-[3px] font-[Inter] text-sm font-light text-[#B4B4B4] group-active:from-[#4D4D4D] group-active:to-[#5A5A5A]">
        {children}
      </div>
    </button>
  )
}

/**
 * Example:
 * ```tsx
 * <ButtonGroup>
 *   <ButtonGroupItem>
 *     <GrabIcon />
 *   </ButtonGroupItem>
 *   <ButtonGroupItem>
 *     <MoveIcon />
 *   </ButtonGroupItem>
 *   <ButtonGroupItem>
 *     <RotateIcon />
 *   </ButtonGroupItem>
 * </ButtonGroup>
 */
export function ButtonGroup({ children }: React.PropsWithChildren) {
  return (
    <div className="flex h-[21px] shadow-[0px_1px_1px_1px_#2B2B2B] [&>*:first-child]:rounded-s-[4px] [&>*:first-child>div]:rounded-s-[3px] [&>*:last-child]:rounded-e-[4px] [&>*:last-child>div]:rounded-e-[3px] [&>*::after]:content-[''] [&>*::after]:absolute [&>*::after]:bg-[rgba(0,0,0,0.35)] [&>*::after]:w-px [&>*::after]:h-[calc(100%-2px)] [&>*]:relative [&>*::after]:top-[1px] [&>*::after]:right-0 rounded-[4px] [&>*:last-child::after]:opacity-0">
      {children}
    </div>
  )
}

/**
 * Example:
 * ```tsx
 * <ButtonGroup>
 *   <ButtonGroupItem>
 *     <GrabIcon />
 *   </ButtonGroupItem>
 *   <ButtonGroupItem>
 *     <MoveIcon />
 *   </ButtonGroupItem>
 *   <ButtonGroupItem>
 *     <RotateIcon />
 *   </ButtonGroupItem>
 * </ButtonGroup>
 */
export function ButtonGroupItem({ children, className, ...props }: React.PropsWithChildren<{
  className?: string
}> & React.ComponentProps<'button'>) {
  return (
    <button className={cx('bg-gradient-to-b from-[#808080] to-[#434343] p-px group h-full active:from-[#7A7A7A] active:to-[#808080]', className)} {...props}>
      <div className="bg-gradient-to-b from-[#5E5E5E] to-[#3B3B3B] font-[Inter] text-sm font-light text-[#B4B4B4] px-[6px] h-full flex items-center justify-self-center group-active:from-[#636363] group-active:to-[#828282] [&>*]:[filter:drop-shadow(0_0.5px_1px_black)]">
        {children}
      </div>
    </button>
  )
}