import { ChangeEvent, FormEvent, useState } from "react";
import { FieldConfig } from "../../type";
import { toBool } from "../../util/Utility";

type SelectElementProps = {
    field: FieldConfig & { id: number };
    onRemoveField: (id: number) => void;
    onEditField: (id: number, updatedField: Partial<FieldConfig>) => void;
};

const SelectElement = ({ field, onRemoveField, onEditField }: SelectElementProps) => {
    const [edit, setEdit] = useState(false);
    const [newOption, setNewOption] = useState("");

    const handleAddOption = () => {
        if (newOption.trim() !== "") {
            const updatedOptions = [...(field.options || []), newOption];
            onEditField(field.id, { options: updatedOptions });
            setNewOption(""); 
        }
    };

    const handleRemoveOption = (optionIndex: number) => {
        const updatedOptions = field.options?.filter((_, index) => index !== optionIndex);
        onEditField(field.id, { options: updatedOptions });
    };

    return (
        <div key={field.id} className={field.className}>
            <div className="form-element frm-element">
                <label>
                    {field.label} {field.required ? "*" : ""}
                </label>
                <select defaultValue={field.value} required={field.required}>
                    <option value="" disabled >
                        {field.placeholder}
                    </option>
                    {field.options?.map((option, index) => (
                        <option key={index} value={option}>
                            {option}
                        </option>
                    ))}
                </select>
                <div className="action-btns">
                    <button
                        className="frm-btn-red"
                        onClick={() => {
                            onRemoveField(field.id);
                            setEdit(false);
                        }}
                    >
                        <i className="fa fa-trash"></i>
                    </button>
                    <button className="frm-btn-blue" onClick={() => setEdit(!edit)}>
                        <i className="fa fa-pencil"></i>
                    </button>
                </div>
                {edit && (
                    <div className="edit-form">
                        <div className="form-field">
                            <label>Label</label>
                            <input
                                type="text"
                                value={field.label}
                                onChange={(e) => onEditField(field.id, { label: e.target.value })}
                            />
                        </div>
                        <div className="form-field mt-2">
                            <label>Placeholder</label>
                            <input
                                type="text"
                                value={field.placeholder}
                                onChange={(e) => onEditField(field.id, { placeholder: e.target.value })}
                            />
                        </div>
                        <div className="form-field mt-2">
                            <label>Required</label>
                            <select
                                id="required"
                                defaultValue={field.required ? "Yes" : "No"}
                                onChange={(e) =>
                                    onEditField(field.id, { required: toBool(e.target.value) })
                                } >
                                <option value="Yes">Yes</option>
                                <option value="No">No</option>
                            </select>
                        </div>
                        <div className="form-field mt-3">
                            <div className="add-option ">
                                <form 
                                    className="flex"
                                    onSubmit={(e : FormEvent<HTMLFormElement>) => {
                                        e.preventDefault();
                                        handleAddOption();
                                    }}>
                                    <input
                                        type="text"
                                        value={newOption}
                                        onChange={(e: ChangeEvent<HTMLInputElement>) => setNewOption(e.target.value)}
                                        placeholder="New option"
                                    />
                                    <button type="submit" className="btn-blue">
                                        <i className="fa fa-plus"></i>
                                    </button>
                                </form>
                            </div>
                            <div className="mt-3">
                                <label>Options</label>
                                <ul className="option-list">
                                    {field.options?.map((option, index) => (
                                        <li key={index} className="option-item">
                                            <div className="option-label">
                                                {option}
                                            </div>
                                            <button
                                                style={{ width: '30px' }}
                                                className="frm-btn-red"
                                                onClick={() => handleRemoveOption(index)}>
                                                <i className="fa fa-trash"></i>
                                            </button>
                                        </li>
                                    ))}
                                </ul>
                            </div>
                        </div>
                    </div>
                )}
            </div>
        </div>
    );
};

export default SelectElement;
