robosats/frontend/src/components/AutocompletePayments.js

import React, { useState } from "react";
import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next';
import { useAutocomplete } from '@mui/base/AutocompleteUnstyled';
import { styled } from '@mui/material/styles';
import { Button}  from "@mui/material";
import { paymentMethods, swapDestinations } from "./payment-methods/Methods";

// Icons
import DashboardCustomizeIcon from '@mui/icons-material/DashboardCustomize';
import AddIcon from '@mui/icons-material/Add';
import PaymentIcon from './payment-methods/Icons'
import CheckIcon from '@mui/icons-material/Check';
import CloseIcon from '@mui/icons-material/Close';

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')};
  align: 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 (
    <div {...other}>
        <div style={{position:'relative',left:'-5px',top:'4px'}}>
          <PaymentIcon width={22} height={22} icon={icon}/>
        </div>
        <span style={{position:'relative',left:'2px'}}>{label}</span>
      <CloseIcon onClick={onDelete} />
    </div>
  );
}

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'};
  align: left;
  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 { t } = useTranslation();
  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" ? paymentMethods : swapDestinations,
    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){
    paymentMethods.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 (
    <Root>
      <div style={{height:'5px'}}></div>
      <div {...getRootProps()} >
        <Label {...getInputLabelProps()} error={props.error}>{props.label}</Label>
        <InputWrapper ref={setAnchorEl} error={props.error} className={focused ? 'focused' : ''}>
          {value.map((option, index) => (
            <StyledTag label={t(option.name)} icon={option.icon} {...getTagProps({ index })} />
          ))}
          <input {...getInputProps()} value={val}/>
        </InputWrapper>
      </div>
      {groupedOptions.length > 0 ? (
        <Listbox {...getListboxProps()}>
            <div style={{position:'fixed', minHeight:'20px',  marginLeft: 120-props.listHeaderText.length*3, marginTop: '-13px'}}>
                <ListHeader ><i>{props.listHeaderText+" "} </i> </ListHeader>
            </div>
          {groupedOptions.map((option, index) => (
            <li key={option.name} {...getOptionProps({ option, index })}>
              <Button fullWidth={true} color='inherit' size="small" sx={{textTransform: "none"}} style={{justifyContent: "flex-start"}}>
                  <div style={{position:'relative', right: '4px', top:'4px'}}>
                    <AddIcon style={{color : '#1976d2'}} sx={{width:18,height:18}} />
                  </div>
                  {t(option.name)}
              </Button>
              <div style={{position:'relative', top: '5px'}}><CheckIcon/></div>
            </li>
          ))}
          {val != null?
              (val.length > 2 ?
                  <Button size="small" fullWidth={true} onClick={() => handleAddNew(getInputProps())}><DashboardCustomizeIcon sx={{width:18,height:18}}/>{props.addNewButtonText}</Button>
              :null)
            :null}
        </Listbox>
      ) :
      //Here goes what happens if there is no groupedOptions
      (getInputProps().value.length > 0 ?
        <Listbox {...getListboxProps()}>
          <Button fullWidth={true} onClick={() => handleAddNew(getInputProps())}><DashboardCustomizeIcon sx={{width:20,height:20}}/>{props.addNewButtonText}</Button>
        </Listbox>
        :null)
      }
    </Root>
  );
}