import React from 'react';
import { LinearGradient } from 'expo-linear-gradient';
import { Platform } from 'react-native';
import { SBox } from '../s-components/layout/s-box';
import { theme } from '../../app/theme';
import { TStyled } from '../types';

type TProps = TStyled;

export const ImgTemplate: React.FC<TProps> = props => {
  const { ...rest } = props;
  const androidPosition = { position: 'absolute', top: 72, left: 1 };

  return (
    <>
      {Platform.OS === 'ios' ? (
        <SBox
          width={80}
          height={80}
          bg="eastBay"
          borderRadius={8}
          mb={29}
          shadowColor={theme.colorsRgba.imgShadow}
          shadowOffset={{ width: 0, height: 8 }}
          shadowRadius={16}
          shadowOpacity={1}
          {...rest}
        >
          <LinearGradient
            colors={theme.gradients.playlistAvatar}
            style={{ flex: 1, borderRadius: 8 }}
            locations={[0, 1]}
          />
        </SBox>
      ) : (
        <SBox left={-40}>
          <SBox
            width={80}
            height={80}
            bg="eastBay"
            borderRadius={8}
            mb={29}
            {...rest}
          >
            <LinearGradient
              colors={theme.gradients.playlistAvatar}
              style={{ flex: 1, borderRadius: 8 }}
              locations={[0, 1]}
            />
          </SBox>

          <LinearGradient
            location={[0, 0.98, 0.99, 1]}
            colors={theme.gradients.androidImgShadow}
            // TODO why style here if it's not supported by LinearGradient???
            // TODO why style here if it's not supported by LinearGradient???
            // TODO why style here if it's not supported by LinearGradient???
            // @ts-ignore
            style={{
              height: 18,
              width: 80,
              zIndex: -1,
              borderRadius: 16,
              ...androidPosition,
            }}
          />
        </SBox>
      )}
    </>
  );
};