import React from 'react';
import { Keyboard, Pressable } from 'react-native';
import { Portal } from '../utils/portal/portal';
import { TopCharts } from './top-charts';
import { EmptyTopCharts } from './empty-top-charts';
import { getDataFreshnessIndicatorVariant } from '../transducers';
import { Icon } from './icon';
import { togglePopup } from '../utils/swipeable-popup-service';
import { SwipeablePopup } from './bottom-sheet/swipeable-popup';
import { SBox } from '../s-components/layout/s-box';
import { useNanoId } from '../hooks/use-nano';

type TProps = {
  date: string;
  vendor: string;
  variant: string;
  visibleTopCharts: boolean;
  disabled?: boolean;
};

export const DataFreshnessIndicator: React.FC<TProps> = props => {
  const { date, vendor, variant, visibleTopCharts, disabled = false } = props;

  const params = {
    vendor,
    date,
    visibleTopCharts,
    variant,
  };
  const variantName = getDataFreshnessIndicatorVariant(variant);
  const id = useNanoId();

  const onClockPress = (variant: string) => {
    togglePopup(variant);
  };

  return (
    <>
      <Portal id={`freshness:${id}`} updateIfAnyChanged={params}>
        <SwipeablePopup
          variant={variantName}
          pb={60}
          pt={28}
          content={<TopCharts vendor={vendor} date={date} />}
        />
        <SwipeablePopup
          variant={`${variantName}-empty`}
          pb={60}
          pt={28}
          content={<EmptyTopCharts />}
        />
      </Portal>

      <Pressable
        testID="user-card"
        onPress={() => {
          if (disabled) return false;

          onClockPress(variant);
          Keyboard.dismiss();
        }}
      >
        {({ pressed }) => (
          <SBox
            width={44}
            height={44}
            alignItems="center"
            justifyContent="center"
          >
            <Icon
              size={32}
              name="clock"
              color={disabled ? 'eastBay' : 'white'}
              opacity={pressed && !disabled ? 0.7 : 1}
            />
          </SBox>
        )}
      </Pressable>
    </>
  );
};