import React from 'react';
import { head } from 'ramda';

// components
import { InputText } from 'primereact/inputtext';
import { useStoreValue } from '../../../../../../store';

const ElementSettingReportHeader = ({ setting = {}, changeFn }) => {
    const chosenFieldSettings = useStoreValue('chosenFieldSettings');
    const label = head(chosenFieldSettings.filter(o => o.name === 'label'));

    return (
        <InputText id={setting.name} aria-describedby={`${setting.name}-help`}
                   value={setting.value}
                   placeholder={label.value}
                   onChange={(e) => changeFn(e.target.value, setting.name)}/>
    );
}

export default ElementSettingReportHeader;