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 { UNBREAKABLE_SPACE } from '../../../common/constants';
import { checkDeviceWithSmallestWidth } from '../../../common/transducers/transducers.device-dimension';

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

type TProps = {
  vendor: TVendor;
};

export const Empty: React.FC<TProps> = props => {
  const { vendor } = props;
  const variant =
    vendor === 'spotify'
      ? 'no-spotify'
      : vendor === 'apple'
      ? 'no-apple'
      : 'no-amazon';
  const text = `No playlists in${UNBREAKABLE_SPACE}the${UNBREAKABLE_SPACE}selected market feature this track.`;
  const isSmallDevice = checkDeviceWithSmallestWidth(width);

  return (
    <SRow
      px={16}
      height={80}
      bg={theme.colors.fiord}
      borderRadius={8}
      alignItems="center"
    >
      <Placeholder
        variant={variant}
        baseWidth={104}
        baseHeight={185}
        marginBottom={0}
      />
      <SBox ml={16} mt={2} width={isSmallDevice ? 170 : 190}>
        <STextMessage>{text}</STextMessage>
      </SBox>
    </SRow>
  );
};