import React from 'react';
import { Undefinable } from 'tsdef';
import { theme } from '../../../app/theme';
import { SBox } from '../../../common/s-components/layout/s-box';
import { TMarket } from '../../../common/types';
import { Row } from '../row';
import { TEntityMarket, TMarketSourcePage, TSetActive } from '../../types';

type TProps = {
  markets: TEntityMarket;
  marketVariant: TMarketSourcePage;
  active: Undefinable<string>;
  setActive: TSetActive;
};

export const MarketsNotificationsSettings: React.FC<TProps> = ({
  markets,
  marketVariant,
  active,
  setActive,
}) => {
  return (
    <>
      <SBox height={1} bg={theme.colors.fiord} mx={16} />
      {markets && markets.data
        ? markets.data.map((market: TMarket, index: number) => {
            return (
              <Row
                marketVariant={marketVariant}
                index={index}
                key={market.id}
                selected={active!}
                market={market}
                onPress={setActive}
              />
            );
          })
        : null}
    </>
  );
};