import React, { memo } from 'react';
import { StyleSheet } from 'react-native';
import { SBox } from '../../../../common/s-components/layout/s-box';
import { TPlaylist } from '../../../types';
import { setMarketCode } from '../../../../common/transducers';
import { SRow } from '../../../../common/s-components/layout/s-row';
import { theme } from '../../../../app/theme';
import { SText } from '../../../../common/s-components/typography/s-text';
import { fp as _ } from '../../../../common/utils/fp';
import { Flag } from '../../../../common/components/flag';
import { SMarketCode } from '../../../s-components/card/s-market-code';

type TProps = {
  updated: TPlaylist['updated'];
  country_code: TPlaylist['country_code'];
};

export const Footer: React.FC<TProps> = memo(props => {
  const { updated, country_code } = props;
  const updatedDate = updated || (_.isNull(updated) ? 'N/A' : '');
  const marketCode = setMarketCode(country_code);
  const borderRadius = 8;
  const marketTransform = marketCode === 'global' ? 'capitalize' : 'uppercase';

  return (
    <>
      <SRow
        height={40}
        px={16}
        borderBottomLeftRadius={borderRadius}
        borderBottomRightRadius={borderRadius}
        justifyContent="space-between"
        // alignItems="center"
      >
        <SBox
          style={StyleSheet.absoluteFill}
          bg={theme.colors.ebonyClay}
          opacity={0.5}
        />

        <SBox mt={12}>
          <SText sm color={theme.colors.periwinkleGray}>
            {updatedDate === 'N/A'
              ? `Updated: ${updatedDate}`
              : `Updated ${updatedDate}`}
          </SText>
        </SBox>

        <SRow mt={11} mr={1}>
          <SMarketCode pr={7} style={{ textTransform: marketTransform }}>
            {_.isNil(marketCode) ? 'N/A' : marketCode}
          </SMarketCode>
          <Flag
            market={country_code}
            width={16}
            height={16}
            marginTop={0}
            variant="white"
          />
        </SRow>
      </SRow>
    </>
  );
});