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

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

interface SingleRecommendationProps extends BaseRecommendationProps {
    options: Options[];
}

export const SingleRecommendationCard: FC<SingleRecommendationProps> = ({
    recommendationId,
    message,
    options,
    actions,
    onSubmit,
    submitted = false,
    selected,
}) => {
    const [localSelectedValue, setLocalSelectedValue] = useState<string>('');

    const handleRadioChange = (value: string) => {
        setLocalSelectedValue(value);
    };

    const handleSubmit = (id: string) => {
        onSubmit({
            sourceMessageId: recommendationId,
            optionIds: localSelectedValue ? [localSelectedValue] : [],
            actionId: id,
        });
    };

    return (
        <Flex direction="column">
            <Flex>
                <span
                    className="m-inline-end-2"
                    style={{ color: core.semantic.ForegroundColorPrimary.value }}
                >
                    <Icon svg={IconAtlasLogo} size="large" />
                </span>
                <Text inline>
                    <b>Atlas</b>
                </Text>
            </Flex>
            <Text size="medium">{message}</Text>
            <Card>
                <Flex direction="column" gap={2}>
                    <RadioGroup>
                        {options?.map(option => (
                            <Radio
                                disabled={submitted}
                                key={option.id}
                                name="action"
                                value={option.id}
                                checked={
                                    !submitted
                                        ? localSelectedValue === option.id
                                        : selected?.includes(option.id ?? '')
                                }
                                onChange={() => handleRadioChange(option.id!)}
                                label={
                                    <Flex direction="column" gap="0" grow={1}>
                                        <Text>
                                            <b>{option.label}</b>
                                        </Text>
                                        <Overflow.Text
                                            rows={2}
                                            expandable
                                            expandText="Show more..."
                                            collapseText="Show less..."
                                        >
                                            {option.description && (
                                                <Text subdued size="small">
                                                    {option.description}
                                                </Text>
                                            )}
                                        </Overflow.Text>
                                    </Flex>
                                }
                            />
                        ))}
                    </RadioGroup>
                    <Flex justifyContent="center" gap={2}>
                        {actions?.map(action => (
                            <Button
                                size="medium"
                                key={action.id}
                                appearance={
                                    (action.type?.toLowerCase() as ButtonAppearance) ?? 'primary'
                                }
                                style={{ width: '100%' }}
                                className="m-inline-start-auto"
                                onClick={() => handleSubmit(action.id!)}
                                disabled={submitted || !localSelectedValue}
                            >
                                {action.name}
                            </Button>
                        ))}
                    </Flex>
                </Flex>
            </Card>
        </Flex>
    );
};