import React, { memo, useContext, useState } from 'react';
import { TouchableWithoutFeedback } from 'react-native';
import { SText } from '../../../common/s-components/typography/s-text';
import { SRow } from '../../../common/s-components/layout/s-row';
import { SCol } from '../../../common/s-components/layout/s-col';
import { SH6 } from '../../../common/s-components/typography/s-h6';
import { SBox } from '../../../common/s-components/layout/s-box';
import { formatYearDate } from '../../../common/transducers';
import { openUrl } from '../../../common/utils/linking-service';
import { fp as _ } from '../../../common/utils/fp';
import { Icon } from '../../../common/components/icon';
import { theme } from '../../../app/theme';
import { ContextStatics, ContextVisibility } from '../../contexts';

type TProps = {};

export const MediaData: React.FC<TProps> = memo(() => {
  const LeftWidth = 28;
  const labelWidth = 99;
  const labelColor = theme.colors.logan2;
  const textColor = theme.colors.white;
  const { data, urls } = useContext(ContextStatics);
  const { visibility } = useContext(ContextVisibility);
  const { statics } = visibility;
  const { error } = statics;
  const release_date = _.path('release_date', data);
  const record_label = _.path('record_label', data);
  const apple = _.path('apple', urls);
  const spotify = _.path('spotify', urls);
  const isAppleUrl = Boolean(_.path('appleUrl', apple));
  const isSpotifyUrl = Boolean(
    _.path('spotifyAllUri', spotify) || _.path('spotifyUrl', spotify)
  );
  const [pressedSpotifyBtn, setPressedSpotifyBtn] = useState(false);
  const [pressedAppleBtn, setPressedAppleBtn] = useState(false);

  return (
    <>
      <SRow mb={26} px={16}>
        <SCol width={LeftWidth}>
          <Icon name="label" size={22} color="lavenderGray" mt={-4} />
        </SCol>
        <SCol width={100}>
          <SH6 color={labelColor}>Label</SH6>
        </SCol>
        <SCol flex={1} ml={-2} top={-4}>
          <SText
            medium
            color={textColor}
            testID="record-label"
            numberOfLines={1}
            ellipsizeMode="tail"
          >
            {error ? 'N/A' : record_label}
          </SText>
        </SCol>
      </SRow>

      <SRow mb={26} px={16}>
        <SCol width={LeftWidth}>
          <Icon name="calendar-2" size={22} color="lavenderGray" mt={-4} />
        </SCol>
        <SCol width={labelWidth}>
          <SH6 color={labelColor}>Released</SH6>
        </SCol>
        <SCol top={-4}>
          <SText medium color={textColor} testID="release-date">
            {error ? 'N/A' : formatYearDate(release_date)}
          </SText>
        </SCol>
      </SRow>

      <SRow px={16}>
        <SCol width={LeftWidth}>
          <Icon name="link" size={22} color="lavenderGray" mt={-4} />
        </SCol>

        <SCol width={labelWidth}>
          <SH6 color={labelColor}>Partners</SH6>
        </SCol>
        <SRow top={-4}>
          {error ? (
            <SBox>
              <SText medium numberOfLines={1} color={textColor}>
                N/A
              </SText>
            </SBox>
          ) : (
            <SRow mt={-14} ml={-13}>
              {isSpotifyUrl ? (
                <TouchableWithoutFeedback
                  testID="spotify-partner"
                  onPress={() =>
                    openUrl(
                      _.path('spotifyAllUri', spotify),
                      _.path('spotifyUrl', spotify)
                    )
                  }
                  onPressIn={() => setPressedSpotifyBtn(true)}
                  onPressOut={() => setPressedSpotifyBtn(false)}
                >
                  <SBox
                    height={44}
                    width={44}
                    mr={8}
                    mt={3}
                    justifyContent="center"
                    alignItems="center"
                    opacity={pressedSpotifyBtn ? 0.7 : 1}
                  >
                    <Icon name="spotify" color="white" size={22} />
                  </SBox>
                </TouchableWithoutFeedback>
              ) : null}
              {isAppleUrl ? (
                <TouchableWithoutFeedback
                  testID="apple-partner"
                  onPress={() => openUrl(_.path('appleUrl', apple))}
                  onPressIn={() => setPressedAppleBtn(true)}
                  onPressOut={() => setPressedAppleBtn(false)}
                >
                  <SBox
                    height={44}
                    width={44}
                    mt={3}
                    ml={4}
                    justifyContent="center"
                    alignItems="center"
                    opacity={pressedAppleBtn ? 0.7 : 1}
                  >
                    <Icon name="apple" color="white" size={22} />
                  </SBox>
                </TouchableWithoutFeedback>
              ) : null}
            </SRow>
          )}
        </SRow>
      </SRow>
    </>
  );
});