import { Accordion, AccordionItem, Button, TextArea, TextareaSize } from '@spglobal/react-components';
import React, { useEffect } from 'react';
import styles from './EsgComponent.scss';
import { Icon, IconNames, Select, Tooltip } from '@spglobal/ca-mfe-package-utils';
import classNames from 'classnames';
import { Size } from '@spglobal/koi-helpers';

const EsgQAdjustments = props => {
    const {sctionTitle, esgScore, esgScoreNew, data, onSaveClick,
         onResetClick, closeEdit, isEditing, isScoreCalculating} = props;
    const [openAcc, setOpenAcc] = React.useState(false);

    const [editEsg, setEditEsg] = React.useState(false);

    const editClick = (e: any) => {
        e.stopPropagation();
        setEditEsg(true);
        isEditing(true);
        !openAcc && setOpenAcc(true);
    };

    const [adjDataState, setAdjDataState] = React.useState(data);

    const makeOptions = arr => arr.map(item => ({label: item, value: item}));

    useEffect(()=>{
        closeEdit && editEsg && saveClick();
    }, [closeEdit]);

    const saveClick = () => {
        setEditEsg(false);
        onSaveClick(adjDataState);
        !closeEdit && isEditing(false);
    };
    const resetToDefault = () => {
        setEditEsg(false);
        !closeEdit && isEditing(false);
        const resetBack = data.map(item => ({...item, value: item.orgValue, rational: ''}));
        setAdjDataState(resetBack);
        onResetClick(resetBack);
    };

    //Select option From Model
    // const modalData = id => {
    //     const obj = data.find(item => item.id === id);
    //     const orgValue = obj?.orgValue ?? obj?.value;
    //     setAdjDataState(prev => prev.map(item => item.id === id ?
    //             {...item, orgValue,
    //             value: 'Excellent',
    //             rational: 'Rationaleee'} : item));
    // };

    const inputSection = (obj, getSelection) => {
        const {id, title, orgValue, value, options, rational} = obj ?? {};
        const userChanges = {id};
        const onSelectChange = option => {
            userChanges.option = option[0].value;
            getSelection(userChanges);
        };
        const onTextChange = e => {
            userChanges.rational = e.target.value;
            getSelection(userChanges);
        };
        return <div className={styles['esg-edit-property']}>
            <div className={styles.title}>
                {title}
                <span className='spg-ml-xs' onClick={()=>{}}>
                    <Icon icon={IconNames.CIRCLE_INFO_O} size={'xsmall'} />
                </span>
            </div>
            <div className={classNames(styles.prevValue, obj.propValue ? styles.propColor : '')}>
                {orgValue ? orgValue : value}
            </div>
            <div className={classNames(styles['esg-select-input'])}>
                <Select
                 dataSource={makeOptions(options)}
                 defaultItem={makeOptions([value])?.[0]}
                 onChange={onSelectChange}
                 propValue=''
                 elementProps={
                    {
                        values: [makeOptions([value])?.[0]],
                        componentSize: Size.SMALL
                    }
                 } />
            </div>
            <div className={classNames(styles.item, styles['esg-text-input'])}>
                <TextArea
                 rows={1}
                 value={rational}
                 className={classNames(obj.propValue && obj.orgRational === rational && styles.propColor)}
                 onChange={onTextChange}
                 placeholder='Add Comments'
                 componentSize={TextareaSize.SMALL}/>
            </div>
        </div>;
    };

    const footerEsg = () => <>
        <div className={styles.hLine}></div>
        <div className={styles['esg-property']}>
            <div className={styles.item}>
                {sctionTitle ?? 'Competitive Position'} <span className={styles.esgIcon}>ESG</span></div>
            <div className={classNames(styles.item, esgScoreNew && esgScoreNew !== esgScore && styles.fade_03)}>
                {esgScore}
            </div>
            { !isScoreCalculating ? (esgScoreNew && esgScoreNew !== esgScore &&
                <div className={styles.item}>{esgScoreNew}</div>) : 'Calculating...'}
        </div>
    </>;

    const editEsgAdjustment = data => {
        const getSelection = e => {
            const obj = data.find(item => item.id === e.id);
            const orgValue = obj?.orgValue ?? obj?.value;
            setAdjDataState(prev => prev.map(item => item.id === e.id ?
                 {...item, orgValue,
                    value: e.option ?? item.value,
                    rational: e.rational ?? item.rational} : item));
        };
        return <div className={styles['esg-edit-container']}>
            {data.map((item, index) => <div key={index}>
                    {inputSection(item, getSelection)}
                </div>
            )}
            {footerEsg()}
            <div className={styles['esg-btn-section']}>
                <Button
                    nonce=''
                    className={styles['esg-save-btn']}
                    onClick={saveClick}
                    purpose='primary'
                    size={'small'}>
                    Save
                </Button>
                <Button
                    nonce=''
                    className={styles['esg-cancel-btn']}
                    onClick={resetToDefault}
                    purpose='secondary'
                    size={'small'}>
                    Reset to Default
                </Button>
            </div>
        </div>;
    };

    const getValue = (value, message, propValue=false) => <div className='spg-d-flex'>
            <div className={classNames(propValue ? styles.propColor : '')}>
                {value}
            </div>
            <div className='spg-ml-xs'>
                {message && <Tooltip triggerElement={
                    <div className='spg-ml-xs'>
                        <Icon icon={IconNames.CHAT} size={'small'} />
                    </div>
                }>{message}</Tooltip>}
            </div>
        </div>;

    return (
        <div className={styles['esg-component-container']}>
            <Accordion>
                <AccordionItem
                    header={<div className={styles['esg-accordion-header']}>
                        <div className={styles['header-item']}>
                            {sctionTitle ?? 'Competitive Position'} <span className={styles.esgIcon}>ESG</span>
                        </div>
                        <div className={styles['header-item']}>
                            <span className={classNames(esgScoreNew && esgScoreNew !== esgScore && styles.fade_03)}>
                                {esgScore}
                            </span>
                            {(!editEsg && (!esgScoreNew || (esgScoreNew === esgScore)))
                             && <span className={classNames(styles.editIcon, 'spg-ml-xs')}>
                                <Icon icon={IconNames.EDIT} size={'small'} onClick={editClick} />
                            </span>}
                        </div>
                        {!isScoreCalculating ? (esgScoreNew && esgScoreNew !== esgScore && <div
                         className={classNames(styles['header-item'], !editEsg && 'spg-mb-xs')}>
                            <span>{esgScoreNew}</span>
                            {!editEsg && <span className={classNames(styles.editIcon, 'spg-ml-xs')}>
                                <Icon icon={IconNames.EDIT} size={'small'} onClick={editClick} />
                            </span>}
                        </div>) : <div className={styles['header-item']}>Calculating...</div>}
                    </div>}
                    className={styles['esg-accordion-container']}
                    isDefaultOpen={true}
                    isOpen={openAcc}
                    onOpenChange={isOpen => setOpenAcc(isOpen)}
                >
                    {editEsg ? <>{editEsgAdjustment(adjDataState)}</> :

                        <div className={styles['esg-container']}>
                            {adjDataState.map((item, index) => <div key={index} className={styles['esg-property']}>
                                <div className={styles.item}>{item.title}</div>
                                <div className={styles.item}>
                                    {item?.orgValue && item?.orgValue !== item?.value ?
                                     <span
                                      className={classNames(styles.fade_03, item?.propValue ? styles.propColor : '')}>
                                        {item?.orgValue}
                                     </span> :
                                      getValue(item?.value, item.rational, item?.propValue)}
                                </div>
                                { item?.orgValue && item?.orgValue !== item?.value &&
                                    <div className={styles.item}>
                                    { getValue(item?.value, item.rational)}
                                </div>
                                }
                            </div>)}
                            {footerEsg()}
                        </div>
    }
                </AccordionItem>
            </Accordion>
        </div>
    );
};

export default EsgQAdjustments;