import Avatar from '@components/Avatar/Avatar';
import { Divider } from '@components/Divider/Divider';
import { InfoCircleIcon } from '@components/aisera-icons/custom';
import { Grid, Typography } from '@mui/material';
import CardSection, { CardData } from '../CardSection/CardSection';
import './application.scss';

export enum AppEnvironment {
    DEV = "DEV",
    LIVE = "LIVE",
    UAT = "UAT"
}

export enum AppType {
    TicketAI = "Ticket AI"
}

export interface Datasource extends CardData { }

export interface Channel extends CardData { }

export interface Application {
    type: string,
    name: string,
    logo: string,
    env: AppEnvironment[]
    id: string,
    domain: string,
    language: string,
    product: AppType,
    createdOn: string,
    lastUpdateOn: string,

    intentCount: number,
    knowledgeDocCount: number,
    workFlowCount: number,

    dataSources: Datasource[],
    channels: Channel[],

    onClickAvatar: (id: string) => void;

    onClickDataSource: (id: string) => void;
    onClickChannel: (id: string) => void;

}

export const Application = ({ ...application }: Application) => {

    const handleDataSourceClick = (id: string) => {
        // Call Datasource function here
        application.onClickDataSource(id);
    };

    const handleChannelClick = (id: string) => {
        // Call Channel function here
        application.onClickChannel(id);

    };

    return (
        <div className='application-card-container' {...application}>
            <div>
                <div className='logo-section' >
                    <Avatar src={application.logo} />
                </div>
            </div>
            <div className='data-section'>

                <div className="title-section" >
                    <Typography className="text-large font-regular text-title" >
                        <div className='title'>{application.name}</div>
                    </Typography>
                    {application.env.map((env: AppEnvironment) => {
                        return (
                            <div key={env} className={`environment environment-${env.toLowerCase()} ${env !== 'LIVE' ? 'environment-circle' : ''}`}>
                                {env}
                            </div>
                        )
                    })}
                </div>



                <Grid container >
                    {/* datasource and channels */}

                    <Grid container className='properties'>
                        <Grid item >
                            <Grid container>
                                <Grid >
                                    <Typography className='text-small font-bold text-subtitle ' >Type:</Typography>
                                    <Typography className='text-small font-bold text-subtitle label ' >Domain:</Typography>
                                    <Typography className='text-small font-bold text-subtitle label'>ID:</Typography>
                                </Grid>
                                <Grid className="value">
                                    <Typography className='text-small font-regular text-title' >{application.type}</Typography>
                                    <Typography className='text-small font-regular text-title label' >{application.domain}</Typography>
                                    <Typography className='text-small font-regular text-title label' >{application.id}</Typography>
                                </Grid>

                            </Grid>

                        </Grid>

                        <Grid item className='label-padding'>
                            <Grid container >
                                <Grid >
                                    <Typography className='text-small font-bold text-subtitle'>Language:</Typography>
                                    <Typography className='text-small font-bold text-subtitle label'>Product:</Typography>
                                </Grid>
                                <Grid className="value">
                                    <Typography className='text-small font-regular text-title'>{application.language}</Typography>
                                    <Typography className='text-small font-regular text-title label'>{application.product}</Typography>
                                </Grid>

                            </Grid>

                        </Grid>

                        <Grid item >
                            <Grid container >
                                <Grid >
                                    <Typography className='text-small font-bold text-subtitle'>Created on:</Typography>
                                    <Typography className='text-small font-bold text-subtitle label'>Last Updated on:</Typography>
                                </Grid>
                                <Grid className="value">
                                    <Typography className='text-small font-regular text-title'>{application.createdOn}</Typography>
                                    <Typography className='text-small font-regular text-title label'>{application.lastUpdateOn}</Typography>
                                </Grid>
                            </Grid>

                        </Grid>
                    </Grid>

                    <Grid container direction="column">
                        <Grid item  >
                            <Grid container direction="row" className='card-section'>
                                <Divider orientation='vertical'></Divider>
                                <Grid item className='data-source section-padding'>
                                    <CardSection
                                        title="Data Sources"
                                        data={application.dataSources}
                                        onClickAvatar={handleDataSourceClick}
                                    />
                                </Grid>
                                <Divider orientation='vertical'></Divider>
                                <Grid className='channel section-padding' item >
                                    <CardSection
                                        title="Channels"
                                        data={application.channels}
                                        onClickAvatar={handleChannelClick}
                                    />
                                </Grid>
                                <Divider orientation='vertical'></Divider>
                            </Grid>
                        </Grid>
                    </Grid>

                </Grid>

                {/* app summary */}
                <div className="summary-box">
                    <div className="summary-title">
                        <div className='text-title'>App Summary</div>
                        <div className='summary-icon'><InfoCircleIcon></InfoCircleIcon></div>
                    </div>

                    <div className='summary-values'>
                        <span className="summary-text">This App includes </span>
                        <span className="text-primary">{application.intentCount}</span>
                        <span className="text-title"> Intents, </span>
                        <span className="text-primary">{application.knowledgeDocCount}</span>
                        <span className="text-title"> Knowledge Documents </span>
                        <span className="summary-text"> and </span>
                        <span className="text-primary">{application.workFlowCount}</span>
                        <span className="text-title"> Workflows.</span>
                    </div>
                </div>
            </div>

        </div>
    )
}

export default Application;