import React from 'react';
import { StyleSheet } from 'react-native';
import { Button } from '../../common/components/button';
import { SH2 } from '../../common/s-components/typography/s-h2';
import { SChartsWidget } from '../s-components/s-charts-widget';
import { SBox } from '../../common/s-components/layout/s-box';
import { SImage } from '../../common/s-components/s-image';
import { SGradientCard } from '../../common/s-components/s-gradient-card';
import { theme } from '../../app/theme';
import { TVendor } from '../../common/types';

const BTN_DEFAULT_WIDTH = 140;
const BTN_DEFAULT_HEIGHT = 128;

export type TProps = {
  onClick: () => void;
  image?: string;
  vendor?: TVendor;
};

export const ChartsWidget: React.FC<TProps> = props => {
  const { onClick, image, vendor } = props;
  const isSpotify = vendor === 'spotify';
  const colorGradient = isSpotify
    ? theme.gradients.topChartsCardSpotify
    : theme.gradients.topChartsCardApple;

  return (
    <SChartsWidget>
      <SBox style={StyleSheet.absoluteFill}>
        {image ? (
          <SImage
            resizeMode="cover"
            alignSelf="flex-end"
            width={1}
            height={BTN_DEFAULT_HEIGHT}
            source={{
              uri: image,
            }}
          />
        ) : null}
        <SGradientCard
          borderRadius={0}
          colors={colorGradient}
          locations={[0, 1]}
          start={[0, 0]}
          end={[0, 1]}
          height={BTN_DEFAULT_HEIGHT}
          width={1}
        />
      </SBox>

      <SBox px={16} py={40} alignItems="flex-start">
        <SH2 mb={2}>{isSpotify ? 'Spotify Daily' : 'Apple Music'}</SH2>
        <SH2>Top {isSpotify ? 200 : 100}</SH2>
      </SBox>
      <SBox position="absolute" top={42} right={16}>
        <Button
          testID="chart-widget-view-chart-button"
          onPress={onClick}
          width={BTN_DEFAULT_WIDTH}
          variant="white"
        >
          View Chart
        </Button>
      </SBox>
    </SChartsWidget>
  );
};