import { useToken } from '@preply/ds-web-core';
import { LayoutFlex, LayoutGrid, Text, TextHighlighted } from '@preply/ds-web-lib';
import React, { FC } from 'react';

import { tokenRenderer } from '../functions/token-type.renderer';
import { ExtendedToken } from '../types';

import { Id, ThirdCol, TokenCardListItem, Value } from './TokenCard.styles';

export const TokenCard: FC<{ token: ExtendedToken }> = ({ token }) => {
    const value = useToken(token.token);
    const renderer = tokenRenderer(token);
    const Component = renderer.renderer;
    return (
        <TokenCardListItem>
            <LayoutFlex gap="16" direction="column">
                <LayoutGrid gap="16" columns={['90px', '1fr', '2fr']}>
                    <Id>
                        <TextHighlighted highlight="blue">(--{token.id})</TextHighlighted>
                    </Id>
                    <LayoutFlex direction="column" gap="4">
                        <Text variant="default-semibold">{token.name}</Text>
                        <Text variant="default-regular">@{token.name.replace(/\./g, '-')}</Text>
                    </LayoutFlex>
                    <ThirdCol>
                        <LayoutFlex direction="column" gap="8" justifyContent="start">
                            {token.colorSchemeAware && (
                                <div>
                                    <TextHighlighted>
                                        <span title="this token may have different values, depending on color scheme">
                                            color scheme aware
                                        </span>
                                    </TextHighlighted>
                                </div>
                            )}
                        </LayoutFlex>
                    </ThirdCol>
                </LayoutGrid>
                <LayoutGrid gap="64" columns={['auto', '1fr']} alignItems="center">
                    <Value>
                        <span>{value as string}</span>
                    </Value>
                    <div>
                        <Component name={token.name} value={value} />
                    </div>
                </LayoutGrid>
            </LayoutFlex>
        </TokenCardListItem>
    );
};
