import React from 'react';
// import { withNavigation } from 'react-navigation';
import { fp as _ } from '../utils/fp';
import { SH3 } from '../s-components/typography/s-h3';
import { SText } from '../s-components/typography/s-text';
import { withMarkets } from '../hoc/with-markets';
import { TMarketsAssoc } from '../types';

type TProps = {
  code?: string;
  small?: boolean;
  capitalize?: boolean;
  marketsAssoc: TMarketsAssoc;
  loading: boolean;
};

const FlagNameComponent: React.FC<TProps> = props => {
  const { code, small, capitalize, ...rest } = props;
  const { marketsAssoc, loading } = rest;
  const marketName = _.path(`${code}.short_name`)(marketsAssoc);
  const name = _.isNotNil(marketName) ? marketName : 'N/A';

  return (
    <>
      {!small && !loading ? (
        <SH3 numberOfLines={1} capitalize={capitalize} {...rest}>
          {name}
        </SH3>
      ) : null}

      {small && !loading ? (
        <SText fontSize={12} {...rest}>
          {name}
        </SText>
      ) : null}
    </>
  );
};

export const FlagName = _.compose(withMarkets)(FlagNameComponent);