import React, { Component } from 'react'
import { withTranslation } from "react-i18next";
import PaymentIcon from './payment-methods/Icons'
import {Tooltip} from "@mui/material"
import { paymentMethods, swapDestinations } from "./payment-methods/Methods";

const ns = [{name: "not specified",icon:'notspecified'}];
const methods = ns.concat(swapDestinations).concat(paymentMethods);

class PaymentText extends Component {
    constructor(props) {
      super(props);
    }

    parseText(){
        const { t } = this.props;
        var rows = [];
        var custom_methods = this.props.text;
        // Adds icons for each PaymentMethod that matches
        methods.forEach((method, i) =>{
            if(this.props.text.includes(method.name)){
                custom_methods = custom_methods.replace(method.name,'')
                rows.push(
                    <Tooltip key={`${method.name}-${i}`} placement="top" enterTouchDelay={0} title={t(method.name)}>
                        <div style={{display: 'inline-block', width: this.props.size+2, height: this.props.size}}>
                            <PaymentIcon width={this.props.size} height={this.props.size} icon={method.icon}/>
                        </div>
                    </Tooltip>
                );
            }
        })

        // Adds a Custom icon if there are words that do not match
        var chars_left = custom_methods.replace('   ','').replace('  ','').replace(' ','').replace(' ','').replace(' ','')

        if(chars_left.length > 0){rows.push(
            <Tooltip key={"pushed"}  placement="top" enterTouchDelay={0} title={this.props.verbose ? this.props.othersText: this.props.othersText+": "+ custom_methods} >
                <div style={{position:'relative', display: 'inline-block',width: this.props.size+2, maxHeight: this.props.size, top:'-1px'}}>
                    <PaymentIcon width={this.props.size*1.1} height={this.props.size*1.1} icon={"custom"}/>
                </div>
            </Tooltip>
            )}

        if(this.props.verbose){
            return (<>{rows} <div style={{display: 'inline-block'}}> <span>{custom_methods}</span></div></>)
        }else{
            return rows
        }
    }

    render() {
      return (
        <div style={{display:'flex',alignItems:'center', flexWrap:'wrap'}}>
            {this.parseText()}
        </div>
      )
    }
}

export default withTranslation()(PaymentText);