import React, { useEffect, useState } from 'react';
import { Filters } from '../commons/entities/filters.entity';
import './device-insights.component.scss';
import MiddleStatusComponent from './components/middle-status/middle-status.component';
import BottomDetailsComponent from './components/bottom-details/bottom-details.component';
import { DeviceInsightsProps } from './device-insights.props';
import config from '../commons/config/config';
import TopFilterComponent from './components/top-filter/top-filter.component';

const DeviceInsightsComponent = (props: DeviceInsightsProps) => {
    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);
    };

    useEffect(() => {
        if (props?.request?.sessionToken) {
            config.token = props?.request?.sessionToken;
            setReady(true);
        } else {
            if (config.usingMock) {
                setFilters(new Filters());
            }
            setReady(true);
        }
    }, []);
    return (
        ready && (
            <div className={'device-insights-wrapper'}>
                <div className={'top'}>
                    <TopFilterComponent onChange={onChange} />
                </div>
                <div className={'middle'}>
                    <MiddleStatusComponent {...filters} />
                </div>
                <div className={'bottom'}>
                    <BottomDetailsComponent {...filters} />
                </div>
            </div>
        )
    );
};
export default DeviceInsightsComponent;