import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from 'react';
import './style.scss';
import ClickableText from '../ClickableText';
import GetSvgIcon from '../GetSvgIcon';
const ConnectDropDown = ({ emailList, onConnectClick, connectedEmail, selectedEmail }) => {
    const [buttonclick, setButtonClick] = useState(false);
    const [displayValue, setDisplayValue] = useState(connectedEmail);
    return (_jsxs("div", { className: "connectDropdown", children: [_jsxs("button", { className: "input-dropdown", onClick: () => {
                    setButtonClick((prev) => !prev);
                }, children: [_jsx("span", { children: displayValue }), _jsx(GetSvgIcon, { iconType: "cheveronDown", iconSize: "24" })] }), _jsx("div", { children: _jsxs("ul", { className: buttonclick ? 'connectDropdown-options-list' : 'connectDropdown-options-list hide', children: [emailList.map((props) => props.statusLabel ? (_jsx(_Fragment, {})) : (_jsx("div", { onClick: () => {
                                setDisplayValue(props.email);
                                selectedEmail(props.email);
                                setButtonClick((prev) => !prev);
                            }, children: props.email }))), _jsx("li", { className: "horizental-line-connectdropdown" }), emailList.map((props) => props.statusLabel ? (_jsxs("div", { children: [_jsxs("span", { children: [_jsx("span", { children: props.email }), _jsx("span", { className: "status-label-connect-button", children: props.statusLabel })] }), _jsx(ClickableText, { text: 'Connect', sizeVariant: "xs", onClick: () => {
                                        onConnectClick(props.email);
                                        setButtonClick((prev) => !prev);
                                    } })] })) : (_jsx(_Fragment, {})))] }) })] }));
};
export default ConnectDropDown;
