import React from 'react';
import { Dimensions } from 'react-native';
import { SBox } from '../../../common/s-components/layout/s-box';
import { SRow } from '../../../common/s-components/layout/s-row';
import { Placeholder } from '../../../common/components/placeholder';
import { TVendor } from '../../../common/types';
import { theme } from '../../../app/theme';
import { STextMessage } from '../../s-components/s-text-message';
import { checkDeviceWithSmallestWidth } from '../../../common/transducers';
import { UNBREAKABLE_SPACE } from '../../../common/constants';

const { width } = Dimensions.get('window');

type TProps = {
  vendor: TVendor;
  variant: 'adds' | 'removals';
};

export const Empty: React.FC<TProps> = props => {
  const { vendor, variant } = props;
  const variantPlaceholder =
    vendor === 'spotify'
      ? 'no-spotify'
      : vendor === 'apple'
      ? 'no-apple'
      : 'no-amazon';
  const preposition = variant === 'adds' ? 'to' : 'from';
  const isSmallDevice = checkDeviceWithSmallestWidth(width);
  const isAdds = variant === 'adds';
  const textWidth = isSmallDevice ? 175 : isAdds ? 175 : 190;

  return (
    <SRow
      alignItems="center"
      bg={theme.colors.fiord}
      borderRadius={8}
      height={160}
      px={16}
    >
      <Placeholder
        variant={variantPlaceholder}
        baseWidth={104}
        baseHeight={185}
        marginBottom={0}
      />
      <SBox ml={16} mt={-2} width={textWidth}>
        <STextMessage>
          No {variant} {preposition} playlists in{UNBREAKABLE_SPACE}the selected
          market in{UNBREAKABLE_SPACE}the last 7 days.
        </STextMessage>
      </SBox>
    </SRow>
  );
};