import React, { useContext, memo } from 'react';
import { StyleSheet } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import { ContextMetrics } from '../../contexts';
import { SBox } from '../../../common/s-components/layout/s-box';
import { SRow } from '../../../common/s-components/layout/s-row';
import { Skeleton } from './skeleton';
import { theme } from '../../../app/theme';
import { SH6 } from '../../../common/s-components/typography/s-h6';
import { fp as _ } from '../../../common/utils/fp';
import { SMetricsValue } from '../../s-components/s-metrics-value';
import { SMetricsBox } from '../../s-components/s-metrics-box';

export const Metrics = memo(() => {
  const props = useContext(ContextMetrics);

  const { visibilitySettings, settings } = props;
  const avgPosition = _.path('data.positions_avg', settings);
  const topTotal = _.path('data.positions_top_total', settings);

  return (
    <SBox mb={56}>
      {visibilitySettings.skeleton ? <Skeleton /> : null}
      {visibilitySettings.data ? (
        <SMetricsBox>
          <LinearGradient
            colors={theme.gradients.nmfMetrics}
            style={[StyleSheet.absoluteFill, { opacity: 0.8 }]}
          />
          <SRow pt={13} justifyContent="center">
            <SBox mr={32} alignItems="center">
              <SMetricsValue medium pb={8}>
                #{avgPosition}
              </SMetricsValue>
              <SH6 color="periwinkleGray">Avg. Position</SH6>
            </SBox>
            <SBox alignItems="center">
              <SMetricsValue medium pb={8}>
                {topTotal}
              </SMetricsValue>
              <SH6 color="periwinkleGray">Top 10 Ranks</SH6>
            </SBox>
          </SRow>
        </SMetricsBox>
      ) : null}
    </SBox>
  );
});