# frozen_string_literal: true

module Ariadne
  module Form
    module TextField
      class Component < Ariadne::Form::BaseInputComponent
        option :name
        option :label
        option :as, default: proc { :text_field }

        # renders_one :leading_visual, BaseComponent::ACCEPT_ANYTHING
        # renders_one :trailing_visual, BaseComponent::ACCEPT_ANYTHING

        option :theme, default: proc { :primary }
        option :size, default: proc { :base }
        option :width, default: proc { :narrow }

        accepts_html_attributes do |html_attrs|
          html_attrs[:class] = style(theme:, size:, width:)

          html_attrs
        end

        def input? = as == :text_field

        def type
          input? ? :text_field : :text_area
        end

        def focusable?
          true
        end

        style do
          base do
            [
              "placeholder:ariadne-text-zinc-600",
              "dark:placeholder:ariadne-text-zinc-400",

              "disabled:ariadne-bg-zinc-100",
              "disabled:ariadne-text-zinc-600",
              "dark:disabled:ariadne-bg-zinc-800",
              "dark:disabled:ariadne-text-zinc-600",
              "disabled:ariadne-cursor-not-allowed",

              "ariadne-bg-foreground",
              "dark:ariadne-bg-foreground-dark",
              "dark:ariadne-bg-zinc-900",
            ]
          end

          variants do
            theme do
              primary do
                [
                  "ariadne-border",
                  "ariadne-border-solid",
                  "ariadne-border-zinc-200",
                  "dark:ariadne-border-zinc-700",

                  "[&:not(:focus)]:enabled:hover:ariadne-border-zinc-300",
                  "[&:not(:focus)]:enabled:hover:ariadne-bg-zinc-200/20",
                  "[&:not(:focus)]:dark:enabled:hover:ariadne-border-zinc-600",
                  "[&:not(:focus)]:dark:enabled:hover:ariadne-bg-zinc-700/20",

                  "focus:ariadne-border-blue-300",
                  "focus:ariadne-bg-blue-300/20",
                  "dark:focus:ariadne-border-blue-600",
                  "dark:focus:ariadne-bg-blue-600/20",
                ]
              end

              error do
                [
                  "ariadne-border",
                  "ariadne-border-solid",
                  "ariadne-border-red-600",
                  "ariadne-bg-red-200",
                  "dark:ariadne-bg-red-700",
                  "[&:not(:focus)]:enabled:hover:ariadne-border-red-700",
                  "[&:not(:focus)]:enabled:hover:ariadne-bg-red-300/80",
                  "[&:not(:focus)]:dark:enabled:hover:ariadne-border-red-700",
                  "[&:not(:focus)]:dark:enabled:hover:ariadne-bg-red-700/80",
                ]
              end

              nude do
                [
                  "ariadne-bg-transparent",
                  "[&:not(:focus)]:enabled:hover:ariadne-bg-zinc-200/20",
                  "[&:not(:focus)]:ariadne-border-none",
                  "disabled:!ariadne-bg-transparent",
                ]
              end
            end

            size do
              sm { "ariadne-text-sm ariadne-px-1 ariadne-leading-5 ariadne-rounded" }
              base { "ariadne-text-base ariadne-px-1.5 ariadne-rounded-md" }
              lg { "ariadne-text-lg ariadne-leading-10 ariadne-px-2.5 ariadne-rounded-lg" }
            end

            width do
              narrow { "" }
              full { "ariadne-w-full" }
            end
          end
        end

        style(:label) do
          base do
            [
              "ariadne-text-content",
              "dark:ariadne-text-content-dark",
              "peer-disabled:ariadne-cursor-not-allowed",
              "peer-disabled:ariadne-opacity-70",
              "ariadne-leading-none",
              "ariadne-font-medium",
            ]
          end

          variants do
            size do
              sm { "ariadne-px-1 ariadne-rounded" }
              base { "ariadne-px-1.5 ariadne-rounded-md" }
              md { "ariadne-px-1.5 ariadne-rounded-md" }
              lg { "ariadne-px-2.5 ariadne-rounded-lg" }
            end
          end
        end

        style(:caption) do
          base do
            [
              "ariadne-text-content",
              "dark:ariadne-text-content-dark",
              "ariadne-mt-2",
              "ariadne-text-sm",
            ]
          end
        end
      end
    end
  end
end