import React, { useEffect, useState } from 'react';
import './user-insights.component.scss';
import TopFilterComponent from './components/top-filter/top-filter.component';
import MiddleStatusComponent from './components/middle-status/middle-status.component';
import BottomDetailsComponent from './components/bottom-details/bottom-details.component';
import { UserInsightsProps } from './user-insights.props';
import { Filters } from '../commons/entities/filters.entity';
import config from '../commons/config/config';
import { BottomDetailsProps } from './components/bottom-details/bottom-details.props';
import { Persona } from './components/bottom-details/components/personas/persona.entity';
import { getDefaultPersonaFilters } from '../persona-detail/persona-detail.component';
import { Views } from '@core/models/core.model';

const UserInsightsComponent = (props: UserInsightsProps) => {
    const [filters, setFilters] = useState<Filters | null>(null);
    const [ready, setReady] = useState(false);

    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);
    };
    const onPersonaChanged = (persona: Persona) => {
        const currentFilters = getDefaultPersonaFilters(filters as Filters, persona.id);

        if (props?.actions?.handler) {
            props.actions.handler({
                type: 'ViewNavigation',
                data: {
                    viewId: Views.PersonaDetail,
                    data: {
                        entityId: persona.id,
                        filters: currentFilters,
                    },
                },
                navOptions: {
                    addViewOptionsToUrl: ['entityId'],
                },
            });
        }
    };

    useEffect(() => {
        if (props?.request?.sessionToken) {
            config.token = props?.request?.sessionToken;
            setReady(true);
        } else {
            // we have to set empty Fitlers for StoryBook purpose here
            if (config.usingMock) {
                setFilters(new Filters());
            }
            setReady(true);
        }
    }, []);

    const bottomDetailsProps: BottomDetailsProps = {
        filters,
        onPersonaChanged,
    };

    return (
        ready && (
            <div className={'user-insights-wrapper'}>
                <div className={'top'}>
                    <TopFilterComponent onChange={onChange} />
                </div>
                <div className={'middle'}>
                    <MiddleStatusComponent {...filters} />
                </div>
                <div className={'bottom'}>
                    <BottomDetailsComponent {...bottomDetailsProps} />
                </div>
            </div>
        )
    );
};

export default UserInsightsComponent;