import React from 'react';
import { head, isEmpty, pathOr } from 'ramda';

// store
import { useStoreValue } from '../../../../../store';

// components
import { Tag } from 'primereact/tag';
import BuilderElementProperLabel from '../../BuilderElementProperLabel';

const BuilderElementMeta = ({ id, name, label }) => {
    const elements = useStoreValue('formElements');
    const element = head(elements.filter(o => o.id === id));
    const elementSettings = pathOr([], ['settings'], element);
    const variable = head(elementSettings.filter(o => o.name === 'variable'));
    const formula = head(elementSettings.filter(o => o.name === 'formula'));
    const requestedAmount = head(elementSettings.filter(o => o.name === 'isRequestedAmount'));
    const delegation = head(elementSettings.filter(o => o.name === 'isDelegation'));
    const csvReportEnabled = head(elementSettings.filter(o => o.name === 'reportEnable'));
    const isVariable = variable && !isEmpty(variable.value) ? 'warning' : 'secondary';
    const isFormula = formula && !isEmpty(formula.value) ? 'warning' : 'secondary';
    const isRequestedAmount = requestedAmount && requestedAmount.value ? 'tertiary' : 'secondary';
    const isDelegation = delegation && delegation.value ? 'tertiary' : 'secondary';
    const isCsvReportEnabled = csvReportEnabled && csvReportEnabled.value ? 'tertiary' : 'secondary';

    return (
        <div className="meta">
            <div className="tagHeader">
                <Tag value={label} severity="info"/>
                {['numberinput', 'criteria_table'].includes(name)
                    ? <Tag value="var" severity={isVariable} title={variable && variable.value ? variable.value : ''}/> : null}
                {name === 'numberinput'
                    ? <Tag value="f(x)" severity={isFormula} title={formula && formula.value ? formula.value : ''}/> : null}
                {requestedAmount && requestedAmount.value
                    ? <Tag value="importo" severity={isRequestedAmount}/> : null}
                {delegation && delegation.value
                    ? <Tag value="delega" severity={isDelegation}/> : null}
                {csvReportEnabled && csvReportEnabled.value
                    ? <Tag value="csv" severity={isCsvReportEnabled}/> : null}
            </div>
            <BuilderElementProperLabel id={id} defaultLabel={label}/>
        </div>
    )
}

export default BuilderElementMeta;