import React from 'react';
import { useRouter } from 'next/router';

import { ACCESS_LEVEL_HUB, ACCESS_LEVEL_PRIVATE, SCHEDULE_TYPE_CUSTOM } from '@/modules/feeds/Editor/constants';

import {
  accessLevelSelector,
  accountSelector,
  defaultTimezoneEnabledSelector,
  isSelfServeUserSelector,
  scheduleTypeSelector,
} from '@/modules/feeds/Editor/redux/selectors';

import { FormGroupTitle, FormRow } from '@/modules/@common/Form';
import { useAppSelector } from '@/modules/@common/store/hooks';
import AccessLevel from '@/modules/feeds/Editor/components/FormElements/AccessLevel/AccessLevel';
import AccessVideoOwner from '@/modules/feeds/Editor/components/FormElements/AccessVideoOwner/AccessVideoOwner';
import Account from '@/modules/feeds/Editor/components/FormElements/Account/Account';
import AuthMethod from '@/modules/feeds/Editor/components/FormElements/AuthMethod/AuthMethod';
import AutoImport from '@/modules/feeds/Editor/components/FormElements/AutoImport/AutoImport';
import DefaultTimeZone from '@/modules/feeds/Editor/components/FormElements/DefaultTimeZone/DefaultTimeZone';
import DisplayName from '@/modules/feeds/Editor/components/FormElements/DisplayName/DisplayName';
import Evergreen from '@/modules/feeds/Editor/components/FormElements/Evergreen/Evergreen';
import Hubs from '@/modules/feeds/Editor/components/FormElements/Hubs/Hubs';
import IabCategories from '@/modules/feeds/Editor/components/FormElements/IabCategories/IabCategories';
import ImportCCFromMrssFile from '@/modules/feeds/Editor/components/FormElements/ImportCCFromMrssFile/ImportCCFromMrssFile';
import ImportPlot from '@/modules/feeds/Editor/components/FormElements/ImportPlot/ImportPlot';
import Keywords from '@/modules/feeds/Editor/components/FormElements/Keywords/Keywords';
import Language from '@/modules/feeds/Editor/components/FormElements/Language/Language';
import Name from '@/modules/feeds/Editor/components/FormElements/Name/Name';
import Password from '@/modules/feeds/Editor/components/FormElements/Password/Password';
import ScheduleFrequency from '@/modules/feeds/Editor/components/FormElements/ScheduleFrequency/ScheduleFrequency';
import SchedulePeriod from '@/modules/feeds/Editor/components/FormElements/SchedulePeriod/SchedulePeriod';
import ScheduleStartTime from '@/modules/feeds/Editor/components/FormElements/ScheduleStartTime/ScheduleStartTime';
import Timezone from '@/modules/feeds/Editor/components/FormElements/Timezone/Timezone';
import Url from '@/modules/feeds/Editor/components/FormElements/Url/Url';
import UseForDownload from '@/modules/feeds/Editor/components/FormElements/UseForDownload/UseForDownload';
import User from '@/modules/feeds/Editor/components/FormElements/User/User';

function GeneralTab() {
  const router = useRouter();
  const id = parseInt(router.query.id as string, 10);

  const accessLevel = useAppSelector(accessLevelSelector);
  const scheduleType = useAppSelector(scheduleTypeSelector);
  const defaultTimezoneEnabled = useAppSelector(defaultTimezoneEnabledSelector);
  const account = useAppSelector(accountSelector);

  const isSelfServeUser = useAppSelector(isSelfServeUserSelector);

  return (
    <>
      <FormGroupTitle>Settings</FormGroupTitle>
      {!isSelfServeUser && (
        <FormRow label="Account">
          <Account disabled={!!id} />
        </FormRow>
      )}

      {!isSelfServeUser && (
        <FormRow label="Source Name">
          <Name disabled={!!id} />
        </FormRow>
      )}

      <FormRow label="Display Name">
        <DisplayName />
      </FormRow>
      <FormRow label="URL">
        <Url />
      </FormRow>
      <FormRow label="Language">
        <Language />
      </FormRow>
      <FormRow label="IAB Categories">
        <IabCategories />
      </FormRow>
      <FormRow label="Access Level">
        <AccessLevel />
      </FormRow>
      {accessLevel === ACCESS_LEVEL_HUB && (
        <FormRow label="Hubs">
          <Hubs disabled={!isSelfServeUser && !account} />
        </FormRow>
      )}
      {accessLevel === ACCESS_LEVEL_PRIVATE && (
        <FormRow label="Video Owner">
          <AccessVideoOwner disabled={!isSelfServeUser && !account} />
        </FormRow>
      )}

      {isSelfServeUser && (
        <>
          <FormRow label="Evergreen">
            <Evergreen />
          </FormRow>
          <FormRow label="Keywords (comma delimited)">
            <Keywords />
          </FormRow>
          <FormRow label="Import Plot/Description">
            <ImportPlot />
          </FormRow>
          <FormRow
            label="Import CC from MRSS File"
            tooltip="Importing the CC file directly from the MRSS file will bypass the AnyClip Speech-to-Text process. Consequently, some features (Highlights, Chapters, & Slides) will not be available."
          >
            <ImportCCFromMrssFile />
          </FormRow>
        </>
      )}

      <FormGroupTitle>Schedule</FormGroupTitle>
      <FormRow label="Auto Import">
        <AutoImport />
      </FormRow>
      <FormRow label="Schedule Period">
        <SchedulePeriod />
      </FormRow>
      <FormRow label="Start time">
        <ScheduleStartTime />
      </FormRow>
      {scheduleType === SCHEDULE_TYPE_CUSTOM && (
        <FormRow label="Frequency (min)">
          <ScheduleFrequency />
        </FormRow>
      )}
      <FormRow label="Default Time Zone">
        <DefaultTimeZone />
      </FormRow>
      {defaultTimezoneEnabled && (
        <FormRow label="Timezone">
          <Timezone />
        </FormRow>
      )}

      <FormGroupTitle>Authentication</FormGroupTitle>
      <FormRow label="Username">
        <User />
      </FormRow>
      <FormRow label="Password">
        <Password />
      </FormRow>
      <FormRow label="Auth. Method">
        <AuthMethod />
      </FormRow>
      <FormRow label="Use For Download">
        <UseForDownload />
      </FormRow>
    </>
  );
}

export default GeneralTab;
