<?php

namespace App\View\Form;

use App\View\Traits\HasFormDimensions;
use Illuminate\View\Component;

class Lever extends Component
{

    use HasFormDimensions;

    public string $id;

    public function __construct(
        public string $name,
        public string $size = 'default',
        public $value = null,
        public ?string $hint = null,
        public bool $disabled = false,
        public bool $required = false,
        public string $label = '',
    ) {
        $this->id = str()->uuid()->toString();
    }

    public function render()
    {
        return <<<'HTML'
            <label class="flex flex-col items-start group {{$heightClass}} " for="{{$id}}" style="{{$heightVars}}">
                @if ($label)
                <x-form::label :required="$required">{{$label}}</x-form::label>
                @endif
                <span class="relative flex-none flex h-[var(--height)] @if($hint) pr-8 @endif">
                    <input id="{{$id}}" type="checkbox" name="{{$name}}" value="{{$value}}" @if($disabled) disabled="disabled" @endif class="absolute peer opacity-0" {{ $attributes }} />
                    <span class="relative cursor-pointer h-full w-[calc(var(--height)*2)] rounded peer-focus:bg-red-500 duration-300 bg-gray-700 peer-checked:bg-primary-700"></span>
                    <span class="absolute h-full top-0 left-0 flex-none flex justify-center items-center aspect-square">
                        <x-ui::sprite
                            class="relative text-gray-400 flex-none text-white duration-300 group-[.size-default]:size-3 group-[.size-sm]:size-2"
                            src="check"
                        ></x-ui::sprite>
                    </span>
                    <span class="absolute h-full top-0 left-[var(--height)] flex-none flex justify-center items-center aspect-square">
                        <x-ui::sprite
                            class="relative text-gray-400 flex-none text-white duration-300 group-[.size-default]:size-3 group-[.size-sm]:size-2"
                            src="close"
                        ></x-ui::sprite>
                    </span>
                    <var class="absolute duration-300 bg-gray-400 rounded
                        top-[var(--padding)] left-[var(--padding)]
                        size-[calc(var(--height)-var(--padding)*2)] peer-checked:left-[calc(var(--height)+var(--padding))]"
                    ></var>
                    @if($hint)
                    <x-form::hint>{{$hint}}</x-form::hint>
                    @endif
                </span>
            </label>
        HTML;
    }
}
