import { FC, useMemo } from 'react';
import { Button, ButtonAppearance, Card, Flex, Icon, Link, Text } from '@servicetitan/anvil2';
import IconAtlasLogo from '@servicetitan/anvil2/assets/icons/st/atlas_logo.svg';
import { core } from '@servicetitan/anvil2/token';

import {
    BaseRecommendationProps,
    ConfirmationResponse,
    RecommendationAction,
} from '../shared-interfaces';

export interface ConfirmationRecommendationProps extends BaseRecommendationProps {
    recommendationId?: string;
    message: string;
    description?: string;
    onSubmit: (confirmationResponse: ConfirmationResponse) => void;
    className?: string;
}

export const ConfirmationCard: FC<ConfirmationRecommendationProps> = ({
    recommendationId,
    actions,
    message,
    onSubmit,
    description,
    className,
    submitted,
}) => {
    const { buttonActions, linkActions } = useMemo(() => {
        const buttons: RecommendationAction[] = [];
        const links: RecommendationAction[] = [];

        actions.forEach(action => {
            if (action.type?.toLowerCase() === 'link') {
                links.push(action);
            } else {
                buttons.push(action);
            }
        });

        return { buttonActions: buttons, linkActions: links };
    }, [actions]);

    const handleSubmit = (action: RecommendationAction) => {
        onSubmit({
            sourceMessageId: recommendationId,
            optionIds: [],
            actionId: action.id,
            parameters: {
                url: action.url,
            },
        });
    };

    return (
        <Flex direction="column" className={className}>
            <Flex>
                <span
                    className="m-inline-end-1"
                    style={{ color: core.semantic.ForegroundColorPrimary.value }}
                >
                    <Icon svg={IconAtlasLogo} size="large" inherit />
                </span>
                <Text inline>
                    <b>Atlas</b>
                </Text>
            </Flex>
            <Text size="medium">{message}</Text>
            <Card>
                <Flex direction="column">
                    {description && (
                        <Text size="small" className="m-block-end-3">
                            {description}
                        </Text>
                    )}
                    <Flex alignItems="flex-start" gap={1}>
                        {buttonActions.map(action => (
                            <Button
                                size="medium"
                                key={action.id}
                                appearance={
                                    (action.type?.toLowerCase() as ButtonAppearance) ?? 'primary'
                                }
                                className="m-inline-start-auto"
                                onClick={() => handleSubmit(action)}
                                disabled={submitted}
                            >
                                {action.name}
                            </Button>
                        ))}
                        {linkActions.map(action => (
                            <Link
                                quiet
                                appearance="primary"
                                key={action.id}
                                onClick={() => handleSubmit(action)}
                            >
                                {action.name}
                            </Link>
                        ))}
                    </Flex>
                </Flex>
            </Card>
        </Flex>
    );
};