import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Button, Input } from '@remotion/design';
import React, { useCallback, useState } from 'react';
function generateId() {
    return Math.random().toString(36).substr(2, 9);
}
const initialMembers = [
    { id: generateId(), name: 'alice' },
    { id: generateId(), name: 'bob' },
];
const Row = ({ value, onChange, onDelete, disableDelete }) => {
    return (_jsxs("div", { className: "flex flex-row gap-2 items-center", children: [_jsx(Input, { placeholder: "Enter username", className: "w-full block flex-1", value: value, onChange: (e) => onChange(e.target.value) }), _jsx(Button, { className: "hover:text-white hover:bg-warn transition-colors w-10 h-10 p-0 rounded-full", onClick: onDelete, type: "button", disabled: disableDelete, "aria-label": "Delete member", depth: 0.5, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M1 1L9 9M1 9L9 1", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })] }));
};
export const ManageTeamMembers = () => {
    const [members, setMembers] = useState(initialMembers);
    // One extra row for adding new member
    const displayedMembers = [...members, { id: 'NEW', name: '' }];
    const updateMember = useCallback((idx, value) => {
        // If it's last "NEW" row, add as new member if not empty
        if (idx === members.length) {
            if (value.trim() !== '') {
                setMembers((prev) => [...prev, { id: generateId(), name: value }]);
            }
        }
        else {
            setMembers((prev) => prev.map((m, i) => (i === idx ? { ...m, name: value } : m)));
        }
    }, [members.length]);
    const deleteMember = useCallback((idx) => {
        setMembers((prev) => prev.filter((_, i) => i !== idx));
    }, []);
    const [loading, setLoading] = useState(false);
    const save = useCallback(() => {
        setLoading(true);
        setTimeout(() => {
            setLoading(false);
        }, 1000);
    }, []);
    return (_jsxs(_Fragment, { children: [_jsx("h2", { children: "Manage team members" }), _jsx("p", { className: "font-brand", children: "Add a new team member to your team." }), displayedMembers.map((member, idx) => (
            // eslint-disable-next-line react/no-array-index-key
            _jsxs(React.Fragment, { children: [_jsx(Row, { value: member.name, onChange: (val) => updateMember(idx, val), onDelete: idx < members.length ? () => deleteMember(idx) : undefined, disableDelete: idx >= members.length }), _jsx("div", { className: "h-2" })] }, idx))), _jsx("div", { className: "h-4" }), _jsx("div", { className: "flex flex-row justify-end", children: _jsx(Button, { className: "bg-brand text-white", loading: loading, onClick: save, children: "Save" }) })] }));
};
