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

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

import { accessLevelSelector } 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 DisplayName from '@/modules/feeds/Editor/components/FormElements/DisplayName/DisplayName';
import Hubs from '@/modules/feeds/Editor/components/FormElements/Hubs/Hubs';
import IabCategories from '@/modules/feeds/Editor/components/FormElements/IabCategories/IabCategories';
import Name from '@/modules/feeds/Editor/components/FormElements/Name/Name';

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

  const accessLevel = useAppSelector(accessLevelSelector);

  return (
    <>
      <FormGroupTitle>Settings</FormGroupTitle>
      <FormRow label="Account">
        <Account disabled={!!id} />
      </FormRow>
      <FormRow label="Source Name">
        <Name disabled={!!id} />
      </FormRow>
      <FormRow label="Display Name">
        <DisplayName />
      </FormRow>
      <FormRow label="Iab Categories">
        <IabCategories />
      </FormRow>
      <FormRow label="Access Level">
        <AccessLevel />
      </FormRow>
      {accessLevel === ACCESS_LEVEL_HUB && (
        <FormRow label="Select Hubs">
          <Hubs />
        </FormRow>
      )}
      {accessLevel === ACCESS_LEVEL_PRIVATE && (
        <FormRow label="Select Owners">
          <AccessVideoOwner />
        </FormRow>
      )}
    </>
  );
}

export default GeneralTab;
