import React, { useState } from 'react';
import { LinearGradient } from 'expo-linear-gradient';
import { Dimensions } from 'react-native';
import {
  TPlaylistParams,
  TRoute,
  TState as TPlaylistPlacementState,
} from '../../types';
import { fp as _ } from '../../../common/utils/fp';
import { SBox } from '../../../common/s-components/layout/s-box';
import { SRow } from '../../../common/s-components/layout/s-row';
import { SH6 } from '../../../common/s-components/typography/s-h6';
import { theme } from '../../../app/theme';
import { Arc } from '../../../common/components/arc';
import { Icon } from '../../../common/components/icon';
import { setMarketCode } from '../../../common/transducers';
import { Flag } from '../../../common/components/flag';
import { SWhiteLine } from '../../s-components/card-playlist/s-white-line';
import { ShadowBox } from '../../../common/components/shadow-box';
import { SkeletonUpdated } from './skeleton-updated';
import { SAvatar } from '../../s-components/card-playlist/s-avatar';
import { ROUTE_PARAMS } from '../../../app/constants';
import { getMarketName } from '../../transducers';
import { SCardPlaylistName } from '../../s-components/card-playlist/s-card-playlist-name';
import { Touchable } from '../../../common/components/touchable';
import { Navigator } from '../../services';
import { ENAVIGATION_VARIANT } from '../../constants';
import { SContainer } from '../../s-components/card-playlist/s-container';
import { SBgBox } from '../../s-components/card-playlist/s-bg-box';
import { STouchableContainer } from '../../s-components/card-playlist/s-touchable-container';
import { SGradientAvatar } from '../../s-components/card-playlist/s-gradient-avatar';
import { SIconVendor } from '../../s-components/card-playlist/s-icon-vendor';
import { SStarContainer } from '../../s-components/card-playlist/s-star-container';
import { SStarCircle } from '../../s-components/card-playlist/s-star-circle';
import { SStreamsContainer } from '../../s-components/card-playlist/s-streams-container';
import { SMarketContainer } from '../../s-components/card-playlist/s-market-container';
import { SMarketName } from '../../s-components/card-playlist/s-market-name';
import { SMarketLabel } from '../../s-components/card-playlist/s-market-label';

type TProps = {
  playlistData: TPlaylistPlacementState['playlistData'];
  data: TPlaylistPlacementState['data'];
  route: TRoute;
};

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

export const PlaylistCard: React.FC<TProps> = props => {
  const { playlistData, data: placementData, route } = props;
  const [tapped, setTapped] = useState(false);
  const bgColor = tapped ? 'pickledBluewood' : 'fiord';

  const marketStreams = _.path(
    ['params', ROUTE_PARAMS.marketCodePlaylistStreams],
    route
  );

  const vendor = _.path('playlistVendor', playlistData);
  const countryCode = _.path('playlistMarket', playlistData);
  const marketCode = setMarketCode(countryCode);
  const ownerTransform = marketCode === 'global' ? 'capitalize' : 'uppercase';
  const gradientColors =
    vendor === 'apple'
      ? theme.gradients.topChartsApple
      : vendor === 'spotify'
      ? theme.gradients.topChartsSpotify
      : theme.gradients.cornflower;
  const cardHeight = marketStreams ? 232 : 196;
  const arcTopPosition = marketStreams ? 203 : 166;
  const updated = _.path('data.updatedDate', placementData);
  const lineWidth = screenWidth / 2 - 74;
  const playlistImageUrl = _.path('playlistImageUrl', playlistData);
  const playlistName = _.path('playlistName', playlistData);
  const loading = _.path('loading', placementData);
  const data = _.path('data', placementData);
  const error = _.path('error', placementData);
  const isStarred = _.path('starred', playlistData);

  const onPress = () => {
    const params = {
      [ROUTE_PARAMS.playlistrootId]: _.path('playlistId', playlistData),
      [ROUTE_PARAMS.playlistrootVendor]: vendor,
      [ROUTE_PARAMS.playlistrootMarket]: marketCode,
      playlistName,
    } as TPlaylistParams;

    Navigator.next({ variant: ENAVIGATION_VARIANT.playlist, params });
  };

  return (
    <SContainer height={cardHeight}>
      <SBgBox height={cardHeight}>
        <LinearGradient colors={gradientColors} style={{ flex: 1 }} />
        <SBox position="absolute" top={arcTopPosition}>
          <Arc />
        </SBox>
      </SBgBox>

      <STouchableContainer>
        <Touchable
          testID="card-playlist"
          onPress={onPress}
          onPressIn={() => setTapped(true)}
          onPressOut={() => setTapped(false)}
        >
          <ShadowBox>
            <SRow bg={bgColor} borderRadius={8} position="relative">
              <SBox width={64} height={64}>
                <SGradientAvatar colors={theme.gradients.pictureHolderDark} />
                {playlistImageUrl ? (
                  <SAvatar source={{ uri: playlistImageUrl }} />
                ) : null}
              </SBox>
              <SRow height={24} mt={20} ml={8}>
                <SIconVendor name={vendor} size={22} />
                <SBox maxWidth={133}>
                  <SCardPlaylistName numberOfLines={1}>
                    {_.isNil(playlistName) ? 'N/A' : playlistName}
                  </SCardPlaylistName>
                </SBox>
              </SRow>
            </SRow>
          </ShadowBox>
          {isStarred ? (
            <SStarContainer>
              <SStarCircle>
                <Icon name="star" size={22} color="wildStrawberry" />
              </SStarCircle>
            </SStarContainer>
          ) : null}
        </Touchable>
      </STouchableContainer>

      {marketStreams ? (
        <SStreamsContainer>
          <SBox mr={7} pl={4}>
            <Flag
              market={marketStreams}
              width={16}
              height={16}
              marginTop={0}
              variant="white"
            />
          </SBox>
          <SH6>{getMarketName(marketStreams) || marketStreams} streams</SH6>
        </SStreamsContainer>
      ) : null}

      <SMarketContainer>
        <SMarketLabel>
          <SH6>{_.toUpper('owner market')}</SH6>
        </SMarketLabel>
        <SRow justifyContent="center" height={16}>
          <SBox mr={7} ml={2}>
            <Flag
              market={countryCode}
              width={16}
              height={16}
              marginTop={0}
              variant="white"
            />
          </SBox>
          <SMarketName style={{ textTransform: ownerTransform }}>
            {_.isNil(marketCode) ? 'N/A' : marketCode}
          </SMarketName>
        </SRow>
      </SMarketContainer>

      <SBox height={13} position="relative" width="100%">
        {loading && !data && !error ? (
          <SBox alignItems="center" top={-6}>
            <SkeletonUpdated />
          </SBox>
        ) : null}
        {data || error ? (
          <>
            <SWhiteLine width={lineWidth} variant="left" />
            <SWhiteLine width={lineWidth} variant="right" />
            <SBox opacity={0.7} alignItems="center">
              <SH6>Updated {!updated || error ? 'N/A' : updated}</SH6>
            </SBox>
          </>
        ) : null}
      </SBox>
    </SContainer>
  );
};