import * as React from 'react';
import { useEffect, useState } from 'react';
import { FormattedMessage } from 'react-intl';
import { ReactComponent as TencentIcon } from '../images/tencent.svg';
import { ReactComponent as AlibabaIcon } from '../images/alibaba.svg';
import { Platfrom } from '../common';

interface PlatformItem {
    type: Platfrom;
    icon: React.ReactNode;
}

interface PlatformCardProps {
    tencentOnly: boolean;
    selectPlatform: (type: Platfrom) => Promise<void>;
}

const platformList: PlatformItem[] = [
    {
        type: Platfrom.TENCENT,
        icon: <TencentIcon />,
    },
    {
        type: Platfrom.ALIBABA,
        icon: <AlibabaIcon />,
    },
];

export const PlatformCard = (props: PlatformCardProps) => {
    const { selectPlatform, tencentOnly } = props;
    const [displayPlatforms, setDisplayPlatforms] = useState<PlatformItem[]>([]);

    useEffect(() => {
        setDisplayPlatforms(tencentOnly ? [platformList[0]] : platformList);
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    return (
        <>
            {displayPlatforms.map(item => {
                return (
                    <div className='platform-option' onClick={() => selectPlatform(item.type)}>
                        <div>
                            <div className='platform-type'>
                                <FormattedMessage id={`home.platform.${item.type}`} />
                            </div>
                            <div className='platform-desc'>
                                <FormattedMessage id={`home.platform.${item.type}.desc`} />
                            </div>
                        </div>
                        <div className='platform-icon'>{item.icon}</div>
                    </div>
                );
            })}
        </>
    );
};
