import React from 'react';

import {
  discardLongClipsSelector,
  isConnectedSelector,
  skipTaggingForLongClipsSelector,
} from '@/modules/feeds/Editor/redux/selectors';

import { FormRow } from '@/modules/@common/Form';
import { useAppSelector } from '@/modules/@common/store/hooks';
import CreateClipSelector from '@/modules/feeds/Editor/components/FormElements/CreateClipSelector/CreateClipSelector';
import DiscardLongClips from '@/modules/feeds/Editor/components/FormElements/DiscardLongClips/DiscardLongClips';
import Evergreen from '@/modules/feeds/Editor/components/FormElements/Evergreen/Evergreen';
import FillLandingPage from '@/modules/feeds/Editor/components/FormElements/FillLandingPage/FillLandingPage';
import ImmediateAvailability from '@/modules/feeds/Editor/components/FormElements/ImmediateAvailability/ImmediateAvailability';
import MaxDuration from '@/modules/feeds/Editor/components/FormElements/MaxDuration/MaxDuration';
import MaxDurationForTagging from '@/modules/feeds/Editor/components/FormElements/MaxDurationForTagging/MaxDurationForTagging';
import PriorityVerification from '@/modules/feeds/Editor/components/FormElements/PriorityVerification/PriorityVerification';
import Restricted from '@/modules/feeds/Editor/components/FormElements/Restricted/Restricted';
import SkipTaggingForLongClips from '@/modules/feeds/Editor/components/FormElements/SkipTaggingForLongClips/SkipTaggingForLongClips';
import VideoFileType from '@/modules/feeds/Editor/components/FormElements/VideoFileType/VideoFileType';

function AdvancedTab() {
  const skipTaggingForLongClips = useAppSelector(skipTaggingForLongClipsSelector);
  const discardLongClips = useAppSelector(discardLongClipsSelector);
  const isConnected = useAppSelector(isConnectedSelector);

  return (
    <>
      <FormRow label="Video File Types">
        <VideoFileType disabled={!isConnected} />
      </FormRow>
      <FormRow label="Evergreen Source">
        <Evergreen disabled={!isConnected} />
      </FormRow>
      <FormRow label="Discard Long Clips">
        <DiscardLongClips disabled={!isConnected} />
      </FormRow>
      {discardLongClips && (
        <FormRow label="Max Duration">
          <MaxDuration disabled={!discardLongClips || !isConnected} />
        </FormRow>
      )}
      <FormRow label="Skip Tagging for Long Clips">
        <SkipTaggingForLongClips disabled={!isConnected} />
      </FormRow>
      {skipTaggingForLongClips && (
        <FormRow label="Max Duration for Tagging (sec)">
          <MaxDurationForTagging disabled={!skipTaggingForLongClips || !isConnected} />
        </FormRow>
      )}
      <FormRow label="Immediate Availability (video+thumbnail available)">
        <ImmediateAvailability disabled={!isConnected} />
      </FormRow>
      <FormRow label="Restricted">
        <Restricted disabled={!isConnected} />
      </FormRow>
      <FormRow label="Create Video Resolutions">
        <CreateClipSelector disabled={!isConnected} />
      </FormRow>
      <FormRow label="Auto-Fill Landing Page URL">
        <FillLandingPage disabled={!isConnected} />
      </FormRow>
      <FormRow label="Priority Verification">
        <PriorityVerification disabled={!isConnected} />
      </FormRow>
    </>
  );
}

export default AdvancedTab;
