import React, { useContext, memo } from 'react';
import { Pressable } from 'react-native';
import { ContextList } 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 { Card } from './card';
import { TItem } from '../../../track-nmf/types';
import { Icon } from '../../../common/components/icon';
import { SH6 } from '../../../common/s-components/typography/s-h6';
import { openPopupByVariant } from '../../../common/utils/keyboard-service';
import {
  ORDER_BY,
  SORT_POPUP_ID,
  TOP_MARKETS_LABEL,
  TRACK_POSITION_LABEL,
} from '../../constants';
import { goToPlaylistPlacement } from '../../services';
import { fp as _ } from '../../../common/utils/fp';
import { ErrorBlock } from '../../../common/components/error-block';

export const List = memo(() => {
  const props = useContext(ContextList);

  const { visibilityData, data, config, pageVariant } = props;
  const items = data.data as TItem[];
  const orderBy =
    _.path('order_by', config) === ORDER_BY.position
      ? TRACK_POSITION_LABEL
      : TOP_MARKETS_LABEL;

  return (
    <SBox bg="ebonyClay">
      {visibilityData.skeleton ? (
        <SBox px={16}>
          <Skeleton variant={pageVariant} />
        </SBox>
      ) : null}

      {!visibilityData.skeleton ? (
        <SRow px={16} mb={24} alignItems="center">
          <SRow flex={1}>
            <Icon name="sort" color="periwinkleGray" size={12} mr={8} />
            <SBox>
              <SH6 color="periwinkleGray">{orderBy}</SH6>
            </SBox>
          </SRow>
          <SBox>
            {visibilityData.error ? (
              <Icon name="sort-2" color="eastBay" size={32} mr={6} />
            ) : (
              <Pressable
                onPress={() => {
                  openPopupByVariant(SORT_POPUP_ID);
                }}
              >
                {({ pressed }) => (
                  <Icon
                    name="sort-2"
                    color="white"
                    size={32}
                    mr={6}
                    opacity={pressed ? 0.7 : 1}
                  />
                )}
              </Pressable>
            )}
          </SBox>
        </SRow>
      ) : null}

      {visibilityData.error ? (
        <ErrorBlock
          message="Data failed to load."
          height={160}
          textTopMargin={-2}
        />
      ) : null}

      {visibilityData.data ? (
        <SRow flexWrap="wrap" pb={18}>
          {items.map((item, index) => {
            const active = item.position !== null;
            const highlighted = active && item.position! <= 10;

            return (
              <SBox
                width={0.5}
                pl={index % 2 === 0 ? 16 : 17 / 2}
                pr={index % 2 !== 0 ? 16 : 17 / 2}
                pb={16}
                key={item.code + item.playlist_id}
              >
                <Card
                  cardVariant={pageVariant}
                  marketCode={item.code}
                  position={item.position}
                  marketName={item.name}
                  trend={item.position_change}
                  isNew={item.is_new}
                  addedDays={item.added_days}
                  active={active}
                  highlighted={highlighted}
                  onPress={() => {
                    goToPlaylistPlacement({
                      playlistId: item.playlist_id,
                      playlistMarket: item.code,
                      playlistVendor: 'spotify',
                      playlistImageUrl: item.image_url,
                      playlistName: item.playlist_name,
                      placementVariant: 'nmf',
                    });
                  }}
                />
              </SBox>
            );
          })}
        </SRow>
      ) : null}
    </SBox>
  );
});