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';

const PersonaDetailComponent = (props: PersonaDetailProps) => {
    const [breadcrumb, setBreadcrumb] = useState([{ label: 'Home' }, { label: 'User Insights' }, { label: 'Persona Detail' }]);
    const [filters, setFilters] = useState<Filters>(props.defaultFilters);
    const [firstFilter, setFirstFilter] = useState(true);
    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) => {
        if (firstFilter && props.defaultFilters) {
            // this is dispatch from Filter
            console.log(props.defaultFilters);
            setFirstFilter(false);
        } else {
            setFilters(e);
        }
    };

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

    return (
        <>
            <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 Detail
                    </h5>
                </section>
            </section>
            <div className={'persona-detail-wrapper'}>
                <div className={'ai-pd-row1'}>
                    <TopFilterComponent onChange={onChange} />
                </div>
                <div className={'ai-pd-row2'}>
                    <PersonaSummaryComponent {...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;