import {useTranslation} from "react-i18next";
import React, {useCallback, useEffect, useState} from "react";
import {Card, Form} from "react-bootstrap";
import CardHeader from "../CardHeader.jsx";
import {faCheck, faList, faPencil} from "@fortawesome/free-solid-svg-icons";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import MultiSelect from "../../input/MultiSelect.jsx";
import {faTrashAlt} from "@fortawesome/free-regular-svg-icons";

const AddressListCard = ({n, group, editGroup, allAddresses, remove}) => {
    const {t} = useTranslation();
    const [selectedIndexes, setSelectedIndexes] = useState([]);
    const [editingName, setEditingName] = useState(false);
    const [name, setName] = useState(group.name);

    useEffect(() => {
        if (!selectedIndexes.length && allAddresses?.length && group?.addresses?.length) {
            setSelectedIndexes(group.addresses.map(address => allAddresses.indexOf(address)))
        }
    }, [selectedIndexes, group, allAddresses])

    const applySelected = useCallback(() => {
        editGroup({...group, addresses: allAddresses.filter((a, i) => selectedIndexes.includes(i))})
    }, [editGroup, group, allAddresses, selectedIndexes]);
    const editName = useCallback(newName => {
        editGroup({...group, name: newName});
    }, [editGroup, group]);
    useEffect(() => {
        if (!editingName && name !== group.name) editName(name);
    }, [editName, editingName, name])

    const selectedAddresses = allAddresses.filter((a, i) => selectedIndexes.includes(i));
    const isUpToDate = !selectedIndexes.length || selectedAddresses.length === group.addresses.length && selectedAddresses.every((a, i) => a === group.addresses[i]);
    return (
        <Card>
            <CardHeader icon={faList} color={"amber"} label={
                editingName ?
                    <Form.Control
                        style={{position: "absolute", top: "0.5rem", left: "2.5rem", width: "calc(100% - 3rem)"}}
                        value={name}
                        onChange={e => setName(e.target.value)}/> : group.name
            }>
                <button
                    style={editingName ? {position: "absolute", right: "1rem", top: "1.2rem"} : {marginLeft: "0.5rem"}}
                    onClick={() => setEditingName(!editingName)}>
                    <FontAwesomeIcon icon={editingName ? faCheck : faPencil}/>
                </button>
            </CardHeader>
            <Card.Body>
                <MultiSelect options={allAddresses} selectedIndexes={selectedIndexes}
                             setSelectedIndexes={setSelectedIndexes}/>
                <button className={'mt-2 btn ' + (isUpToDate ? 'bg-transparent' : 'bg-theme')}
                        onClick={applySelected} disabled={isUpToDate}>
                    {t('html.label.apply')}
                </button>
                <button className={'mt-2 btn btn-outline-secondary float-end'}
                        onClick={remove}>
                    <FontAwesomeIcon icon={faTrashAlt}/>
                </button>
            </Card.Body>
        </Card>
    )
}
export default AddressListCard;