import { PersonaDetailProps } from './persona-detail.props';
import { useEffect, useState } from 'react';
import { Filters } from '../commons/entities/filters.entity';
import { Breadcrumbs, BreadcrumbData } from '../../../components/Breadcrumbs/Breadcrumbs';
import './persona-detail.component.scss';
import '../../../styles/main.css';
import TopFilterComponent from './components/top-filter/top-filter.component';
import PersonaSummaryComponent from './components/persona-summary/persona-summary.component';
import LocationIssuecategoryComponent from './components/location-issuecategory/location-issuecategory.component';
import TopChallengesComponent from '../user-insights/components/bottom-details/components/top-challenges/top-challenges.component';
import ApplicationDevicesComponent from './components/application-devices/application-devices.component';
import config from '../commons/config/config';
const PERSONA_DETAILS = 'Persona Details';

export const getDefaultPersonaFilters = (defaultFilters: Filters, entityId: number) => {
    const currentFilters = defaultFilters?.clone() || new Filters();
    currentFilters.upsertFilter({
        field: 'persona_id',
        operand: [entityId],
        operator: 'IN',
        type: '',
    });
    return currentFilters;
};

const PersonaDetailComponent = (props: PersonaDetailProps) => {
    const [ready, setReady] = useState(false);
    const [breadcrumb, setBreadcrumb] = useState([
        { label: 'Home' },
        { label: 'User Insights' },
        { label: PERSONA_DETAILS },
    ]);
    const [filters, setFilters] = useState<Filters>(
        getDefaultPersonaFilters(props.defaultFilters, props.request.entityId)
    );

    const onBotIdChangedLisener = (id: any) => {
        if (filters) {
            filters.upsertFilter({
                field: 'bot_id',
                operand: id,
                operator: '=',
                type: '',
            });
            setFilters(filters.clone());
        }
    };
    props.onBotIdChanged && props.onBotIdChanged(onBotIdChangedLisener);

    const onChange = (e: Filters) => {
        setFilters(e);
    };

    useEffect(() => {
        if (!config.token) {
            if (props?.request?.sessionToken) {
                config.token = props.request.sessionToken;
                setReady(true);
            } else {
                if (config.usingMock) setReady(true);
            }
        } else {
            setReady(true);
        }
    }, []);

    const handleBreadCrumbClick = (breadcrumbItem: BreadcrumbData) => {
        const index = breadcrumb.indexOf(breadcrumbItem);
        if (index !== -1) {
            props.actions?.handler({
                type: 'BreadcrumbNavigation',
                data: { index: breadcrumb.indexOf(breadcrumbItem) },
            });
        }
    };

    return (
        ready && (
            <>
                <section className='react-page-top'>
                    <section className='react-page-top-header'>
                        <Breadcrumbs data={breadcrumb as BreadcrumbData[]} onClick={handleBreadCrumbClick} />
                        <h5 className='react-page-top-title'>{PERSONA_DETAILS}</h5>
                    </section>
                </section>
                <div className={'persona-detail-wrapper'}>
                    <div className={'ai-pd-row1'}>
                        <TopFilterComponent onChange={onChange} preSelectfilters={filters} />
                    </div>
                    <div className={'ai-pd-row2'}>
                        <PersonaSummaryComponent filters={filters} />
                    </div>
                    <div className={'ai-pd-row3'}>
                        <LocationIssuecategoryComponent {...filters} />
                    </div>
                    <div className={'ai-pd-row4'}>
                        <TopChallengesComponent {...filters} />
                    </div>
                    <div className={'ai-pd-row5'}>
                        <ApplicationDevicesComponent {...filters} />
                    </div>
                </div>
            </>
        )
    );
};

export default PersonaDetailComponent;