import React, { useState } from "react";
import PropTypes from 'prop-types';
import { useAutocomplete } from '@mui/base/AutocompleteUnstyled';
import CheckIcon from '@mui/icons-material/Check';
import CloseIcon from '@mui/icons-material/Close';
import { styled } from '@mui/material/styles';
import PaymentIcon from './PaymentIcons';
import {Button} from "@mui/material";
import DashboardCustomizeIcon from '@mui/icons-material/DashboardCustomize';
import AddIcon from '@mui/icons-material/Add';
const Root = styled('div')(
({ theme }) => `
color: ${
theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.65)' : 'rgba(0,0,0,.85)'
};
font-size: 14px;
`,
);
const Label = styled('label')(
({ theme , error}) => `
color: ${theme.palette.mode === 'dark' ? (error? '#f44336': '#cfcfcf') : (error? '#dd0000':'#717171')};
aling: center;
padding: 0 0 4px;
line-height: 1.5; f44336
display: block;
font-size: 13px;
`,
);
const InputWrapper = styled('div')(
({ theme , error}) => `
width: 244px;
min-height: 44px;
max-height: 124px;
border: 1px solid ${theme.palette.mode === 'dark' ? (error? '#f44336': '#434343') : (error? '#dd0000':'#c4c4c4')};
background-color: ${theme.palette.mode === 'dark' ? '#141414' : '#fff'};
border-radius: 4px;
padding: 1px;
display: flex;
flex-wrap: wrap;
overflow-y:auto;
&:hover {
border-color: ${theme.palette.mode === 'dark' ? (error? '#f44336':'#ffffff') : (error? '#dd0000' :'#2f2f2f')};
}
&.focused {
border: 2px solid ${theme.palette.mode === 'dark' ? (error? '#f44336':'#90caf9') : (error? '#dd0000' :'#1976d2')};
}
& input {
background-color: ${theme.palette.mode === 'dark' ? '#141414' : '#fff'};
color: ${
theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.65)' : 'rgba(0,0,0,.85)'
};
height: 30px;
box-sizing: border-box;
padding: 4px 6px;
width: 0;
min-width: 30px;
font-size: 15px;
flex-grow: 1;
border: 0;
margin: 0;
outline: 0;
max-height: 124px;
}
`,
);
function Tag(props) {
const { label, icon, onDelete, ...other } = props;
return (
);
}
Tag.propTypes = {
label: PropTypes.string.isRequired,
icon: PropTypes.string.isRequired,
onDelete: PropTypes.func.isRequired,
};
const StyledTag = styled(Tag)(
({ theme }) => `
display: flex;
align-items: center;
height: 34px;
margin: 2px;
line-height: 22px;
background-color: ${
theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.08)' : '#fafafa'
};
border: 1px solid ${theme.palette.mode === 'dark' ? '#303030' : '#e8e8e8'};
border-radius: 2px;
box-sizing: content-box;
padding: 0 4px 0 10px;
outline: 0;
overflow: hidden;
&:focus {
border-color: ${theme.palette.mode === 'dark' ? '#177ddc' : '#40a9ff'};
background-color: ${theme.palette.mode === 'dark' ? '#003b57' : '#e6f7ff'};
}
& span {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 15px;
}
& svg {
font-size: 15px;
cursor: pointer;
padding: 4px;
}
`,
);
const ListHeader = styled('span')(
({ theme }) => `
color: ${theme.palette.mode === 'dark' ? '#90caf9' : '#1976d2'};
aling: center;
width: 141px;
line-height:10px;
max-height: 10px;
display: inline-block;
background-color: ${theme.palette.mode === 'dark' ? '#141414' : '#ffffff'};
font-size: 12px;
pointer-events: none;
`,
);
const Listbox = styled('ul')(
({ theme }) => `
width: 244px;
margin: 2px 0 0;
padding: 0;
position: absolute;
list-style: none;
background-color: ${theme.palette.mode === 'dark' ? '#141414' : '#fff'};
overflow: auto;
max-height: 250px;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
z-index: 999;
& li {
padding: 5px 12px;
display: flex;
& span {
flex-grow: 1;
}
& svg {
color: transparent;
}
}
& li[aria-selected='true'] {
background-color: ${theme.palette.mode === 'dark' ? '#2b2b2b' : '#fafafa'};
font-weight: 600;
& svg {
color: ${theme.palette.primary.main};
}
}
& li[data-focus='true'] {
background-color: ${theme.palette.mode === 'dark' ? '#003b57' : '#e6f7ff'};
cursor: pointer;
& svg {
color: currentColor;
}
}
`,
);
export default function AutocompletePayments(props) {
const {
getRootProps,
getInputLabelProps,
getInputProps,
getTagProps,
getListboxProps,
getOptionProps,
groupedOptions,
value,
focused="true",
setAnchorEl,
} = useAutocomplete({
sx: {width:'200px', align:'left'},
id: 'payment-methods',
multiple: true,
options: props.optionsType=="fiat" ? somePaymentMethods : someSwapDestinations,
getOptionLabel: (option) => option.name,
onInputChange: (e) => setVal(e ? (e.target.value ? e.target.value : "") : ""),
onChange: (event, value) => props.onAutocompleteChange(optionsToString(value)),
onClose: () => (setVal(() => "")),
});
const [val, setVal] = useState();
function optionsToString(newValue){
var str = '';
var arrayLength = newValue.length;
for (var i = 0; i < arrayLength; i++) {
str += newValue[i].name + ' ';
}
return str.slice(0, -1);
}
function handleAddNew(inputProps){
somePaymentMethods.push({name: inputProps.value, icon:'custom'})
var a = value.push({name: inputProps.value, icon:'custom'});
setVal(() => "");
if(a || a == null){props.onAutocompleteChange(optionsToString(value))}
return false
};
return (
{value.map((option, index) => (
))}
{groupedOptions.length > 0 ? (
{props.listHeaderText}
{groupedOptions.map((option, index) => (
))}
{val != null?
(val.length > 2 ?
:null)
:null}
) :
//Here goes what happens if there is no groupedOptions
(getInputProps().value.length > 0 ?
:null)
}
);
}
// Most used Payment Methods RoboSats (First Month)
var somePaymentMethods = [
{name: "Revolut",icon:'revolut'},
{name: "CashApp",icon:'cashapp'},
{name: "Zelle",icon:'zelle'},
{name: "Strike",icon:'strike'},
{name: "Rebellion",icon:'rebellion'},
{name: "Interac e-Transfer",icon:'interac'},
{name: "Wise",icon:'wise'},
{name: "Venmo",icon:'venmo'},
{name: "Faster Payments",icon:'faster'},
{name: "Paypal",icon:'paypal'},
{name: "LINE Pay",icon:'linepay'},
{name: "PromptPay",icon:'promptpay'},
{name: "Bizum",icon:'bizum'},
{name: "N26",icon:'n26'},
{name: "Amazon GiftCard",icon:'amazon'},
{name: "Bancolombia",icon:'bancolombia'},
{name: "SPEI",icon:'spei'},
{name: "PIX",icon:'pix'},
{name: "HalCash",icon:'halcash'},
{name: "Vivid",icon:'vivid'},
{name: "Google Play Gift Code",icon:'googleplay'},
{name: "Nequi",icon:'nequi'},
{name: "MercadoPago",icon:'mercadopago'},
{name: "Monero",icon:'monero'},
{name: "USDT",icon:'usdt'},
{name: "Airtel Money",icon:'airtel'},
{name: "MTN Money",icon:'mtn'},
{name: "M-Pesa",icon:'mpesa'},
{name: "MoMo",icon:'momo'},
{name: "Tigo Pesa",icon:'tigopesa'},
{name: "Cash F2F",icon:'cash'},
];
var someSwapDestinations = [
{name: "On-Chain BTC",icon:'onchain'},
{name: "RBTC",icon:'rbtc'},
{name: "LBTC",icon:'lbtc'},
{name: "WBTC",icon:'wbtc'},
];