import React from 'react';
import { SText } from '../../common/s-components/typography/s-text';
import { CARD_WIDTH, CARD_HEIGHT } from '../constants';
import { SCardContainer } from '../s-components/s-card-container';
import { Placeholder } from '../../common/components/placeholder';
import { SBox } from '../../common/s-components/layout/s-box';
import { Button } from '../../common/components/button';
import { Router } from '../../common/utils/navigation-service';
import { ROUTES } from '../../app/constants';
import { MARKET_VARIANT_PARAMS } from '../../market-selector/constants';
import { SFigureMessage } from '../../common/s-components/s-figure-message';

type TProps = {};

export const CardEmptyGlobal: React.FC<TProps> = () => {
  const goToMarketSelector = () => {
    Router.goTo(ROUTES.marketselector, {
      marketVariant: MARKET_VARIANT_PARAMS.trackMarkets,
    });
  };

  return (
    <SCardContainer
      borderRadius={8}
      bg="fiord"
      width={CARD_WIDTH}
      height={CARD_HEIGHT}
    >
      <SBox mt={-12} mr={0}>
        <Placeholder
          variant="global"
          baseWidth={105}
          baseHeight={188}
          marginBottom={12}
        />
        <SFigureMessage>
          Select a home market different{'\n'}
          from <SText bold>Global</SText> to see more data.
        </SFigureMessage>
        <SBox pt={19} alignItems="center">
          <Button
            testID="card-empty-global-select-button"
            onPress={goToMarketSelector}
            width={140}
          >
            Select
          </Button>
        </SBox>
      </SBox>
    </SCardContainer>
  );
};