import { type Component, createSignal } from 'solid-js';
import { FaSolidUsers, FaSolidUser, FaSolidPhone, FaSolidChevronDown, FaSolidCircleInfo } from 'solid-icons/fa';
import InputGroup from './InputGroup';
import PhoneInput from './PhoneInput';
import { colorMap } from './styles';

interface PersonalDetailsProps {
    accentColor: 'amber' | 'red' | 'blue';
    content: any; // Tip: Используйте HeroContent
    // IDs
    passengersId: string;
    nameId: string;
    phoneId: string;
    infoId: string;
    // Values
    passengersValue: string;
    nameValue: string;
    phoneValue: string;
    infoValue: string;
    // Setters
    onPassengersChange: (val: string) => void;
    onNameChange: (val: string) => void;
    onPhoneChange: (val: string) => void;
    onInfoChange: (val: string) => void;
    // Errors
    passengersError?: string;
    nameError?: string;
    phoneError?: string;
}

export const PersonalDetails: Component<PersonalDetailsProps> = (props) => {
    const [menuOpen, setMenuOpen] = createSignal(false);
    const maxChars = 200;

    return (
        <div class="space-y-4 mb-2">
            <InputGroup
                id={props.passengersId}
                label={props.content.passengers}
                icon={<FaSolidUsers />}
                error={props.passengersError}
                accentColor={props.accentColor}
            >
                <div class="relative w-full">
                    <select
                        id={props.passengersId}
                        value={props.passengersValue}
                        onFocus={() => setMenuOpen(true)}
                        onBlur={() => setMenuOpen(false)}
                        onChange={(e) => {
                            props.onPassengersChange(e.currentTarget.value);
                            setMenuOpen(false);
                            e.currentTarget.blur();
                        }}
                        class="block w-full border-0 p-2.5 pr-10 appearance-none focus:ring-0 sm:text-sm bg-transparent cursor-pointer"
                    >
                        <option value="">{props.content.selectOption}</option>
                        <option value="1-3">1-3</option>
                        <option value="4-6">4-6</option>
                        <option value="7-8">7-8</option>
                        <option value="9+">{props.content.multipleVans}</option>
                    </select>
                    <div class={`absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none text-gray-400 transition-transform duration-200 ${menuOpen() ? 'rotate-180' : ''}`}>
                        <FaSolidChevronDown />
                    </div>
                </div>
            </InputGroup>

            <InputGroup
                id={props.nameId}
                label={props.content.name}
                icon={<FaSolidUser />}
                error={props.nameError}
                accentColor={props.accentColor}
            >
                <input
                    id={props.nameId}
                    type="text"
                    value={props.nameValue}
                    onInput={(e) => props.onNameChange(e.currentTarget.value)}
                    placeholder={props.content.name}
                    autocomplete="name"
                    class="block w-full border-0 p-2.5 placeholder-gray-400 focus:ring-0 sm:text-sm bg-transparent"
                />
            </InputGroup>

            <InputGroup
                id={props.phoneId}
                label={props.content.phone}
                icon={<FaSolidPhone />}
                error={props.phoneError}
                accentColor={props.accentColor}
            >
                <PhoneInput
                    id={props.phoneId}
                    value={props.phoneValue}
                    onInput={props.onPhoneChange}
                    placeholder="+49 000 0000000"
                    class="block w-full border-0 p-2.5 placeholder-gray-400 focus:ring-0 sm:text-sm bg-transparent"
                    aria-invalid={!!props.phoneError}
                    aria-describedby={props.phoneError ? `${props.phoneId}-error` : undefined}
                />
            </InputGroup>

            <div class="relative pb-2">
                <label for={props.infoId} class="absolute -top-2 left-2 inline-block bg-white px-1 text-xs font-medium z-10">
                    {props.content.additionalInfo}
                </label>
                <div class={`relative flex items-start border rounded-md shadow-sm transition-colors border-gray-300 ${colorMap.focus[props.accentColor]} bg-white`}>
                    <div class="absolute left-3 top-3 z-10 text-gray-400">
                        <FaSolidCircleInfo />
                    </div>
                    <div class="w-full pl-10">
                        <textarea
                            id={props.infoId}
                            rows={2}
                            value={props.infoValue}
                            onInput={(e) => props.onInfoChange(e.currentTarget.value.slice(0, maxChars))}
                            placeholder={props.content.additionalInfoPlaceholder}
                            class="block w-full border-0 p-2.5 placeholder-gray-400 focus:ring-0 sm:text-sm resize-none bg-transparent"
                        />
                        <div class="flex justify-end px-3 py-1 text-xs select-none">
                            <span classList={{
                                'text-red-600 font-bold': props.infoValue.length >= maxChars,
                                'text-gray-400': props.infoValue.length < maxChars
                            }}>
                                {props.infoValue.length}/{maxChars}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};