import React, { useEffect, useState } from 'react';
import { Line } from '../../common/components/line';
import { Router } from '../../common/utils/navigation-service';
import { ROUTE_PARAMS, ROUTES } from '../../app/constants';
import { MARKET_VARIANT_PARAMS } from '../../market-selector/constants';
import { SBox } from '../../common/s-components/layout/s-box';
import { MarketsTagged } from '../../common/components/markets-tagged';
import { SText } from '../../common/s-components/typography/s-text';
import { fp as _ } from '../../common/utils/fp';
import { Switch } from '../../common/components/switch';
import { SECTION_VARIANT } from '../constants';
import { TNotificationCategory } from '../types';
import { SCategoryItem } from '../../common/s-components/s-category-item';
import { PAGES, updatePageMeta } from '../../analytics';

type TProps = {
  checked: boolean;
  description?: string;
  onChange: Function;
  label: string;
  zIndex?: number;
  variant: SECTION_VARIANT;
  value?: TNotificationCategory | string[];
  renderDropdown?: Function;
};

export const Section: React.FC<TProps> = ({
  checked,
  description,
  onChange,
  label,
  zIndex,
  variant,
  value,
  renderDropdown,
}) => {
  const isMarketVariant = variant === SECTION_VARIANT.market;
  const isStarredTracksVariant = variant === SECTION_VARIANT.starredTracks;
  const isStarredPlaylistsVariant =
    variant === SECTION_VARIANT.starredPlaylists;

  const [showContent, setShowContent] = useState(true);

  useEffect(() => {
    setShowContent(checked);
  }, [checked]);

  return (
    <>
      <SBox px={16}>
        <SCategoryItem height={1} />
      </SBox>

      <Line
        zIndex={zIndex}
        label={label}
        labelColor="white"
        renderComponent={() => (
          <Switch
            checked={checked}
            onChange={value => {
              onChange(value);
              setShowContent(value);
            }}
          />
        )}
      />

      {showContent ? (
        <SBox>
          <Line
            label={isMarketVariant ? 'Market' : 'Settings'}
            labelColor="white"
            onPress={() => {
              if (isMarketVariant) {
                return Router.goTo(ROUTES.marketselector, {
                  [ROUTE_PARAMS.marketVariant]:
                    MARKET_VARIANT_PARAMS.notificationSettings,
                  [ROUTE_PARAMS.marketCodes]: ((value || []) as Array<
                    string
                  >).join(','),
                });
              }

              updatePageMeta({
                page: PAGES.Notificationsettingsdetails.page,
                category_name: isStarredTracksVariant
                  ? 'Starred tracks'
                  : isStarredPlaylistsVariant
                  ? 'Starred playlists'
                  : 'Charts',
              });

              Router.goTo(ROUTES.notificationsettingsdetails, {
                [ROUTE_PARAMS.notificationSettingsDetailsVariant]: variant,
              });
            }}
            renderComponent={() => {
              if (isMarketVariant) {
                return (
                  <SBox
                    mr={
                      _.path('length', value) === 1
                        ? 5
                        : _.path('length', value) === 2
                        ? 6
                        : 2
                    }
                    mt={-1}
                  >
                    <MarketsTagged markets={(value || []) as string[]} />
                  </SBox>
                );
              }

              return <></>;
            }}
            renderArrowNext
          />
          {isMarketVariant ? (
            <SBox px={16} pt={15} pb={35}>
              <SText sm color="periwinkleGray" lineHeight={16}>
                Market selections do not apply to Starred Playlist
                notifications.
              </SText>
            </SBox>
          ) : null}

          {renderDropdown ? renderDropdown() : null}
        </SBox>
      ) : null}
      {description ? (
        <SBox pl={16} pr={25} pt={15} pb={44}>
          <SText sm color="periwinkleGray" lineHeight={16}>
            {description}
          </SText>
        </SBox>
      ) : null}
    </>
  );
};