import React from 'react';
import { useDispatch, useSelector } from 'react-redux';

import { TYPE_PUBLISHER, TYPES_OPTIONS } from '../../../../List/constants';
import { PUBLIC_ACCOUNT_TYPE } from '@/modules/contentOwners/Editor/constants';

import * as selectors from '../../../redux/selectors';
import { getAccountOptionsAction, removeErrorByPropAction, setAction } from '../../../redux/slices';
import { getInputPropsByName } from '@/modules/@common/Form/helpers';

import { FormRow, useFormSettings } from '@/modules/@common/Form';
import { Autocomplete, MenuItem, Select, Stack, Switch, TextField, Typography } from '@/mui/components';

const COMMENTS_MAX_LENGTH = 255;

function GeneralTab() {
  const { size } = useFormSettings();
  const dispatch = useDispatch();

  // selectors
  const name = useSelector(selectors.nameSelector);
  const salesforceId = useSelector(selectors.salesforceIdSelector);
  const comments = useSelector(selectors.commentsSelector);
  const playFromCo = useSelector(selectors.playFromCoSelector);
  const callToAction = useSelector(selectors.callToActionSelector);
  const type = useSelector(selectors.typeSelector);
  const status = useSelector(selectors.statusSelector);
  const isPublic = useSelector(selectors.isPublicSelector);
  const feedPriority = useSelector(selectors.feedPrioritySelector);

  const account = useSelector(selectors.accountSelector);
  const accountOptions = useSelector(selectors.accountOptionsSelector);

  const scheme = useSelector(selectors.schemeSelector);

  const notAllowedConnectPublicCoWithNonPublicAccount = account && !!isPublic && account?.type !== PUBLIC_ACCOUNT_TYPE;

  // handlers
  const handleSetState = (state) => dispatch(setAction(state));

  return (
    <>
      <FormRow label="Content Owner Name">
        <TextField
          size={size}
          placeholder="Enter Content Owner Name"
          value={name}
          onChange={(e) => handleSetState({ name: e.target.value })}
          {...getInputPropsByName(scheme, ['name'])}
          onFocus={() => dispatch(removeErrorByPropAction(['name']))}
        />
      </FormRow>
      <FormRow label="Salesforce Opportunity ID">
        <TextField
          size={size}
          placeholder="Enter Salesforce Id"
          value={salesforceId}
          onChange={(e) => handleSetState({ salesforceId: e.target.value })}
          {...getInputPropsByName(scheme, ['salesforceId'])}
          onFocus={() => dispatch(removeErrorByPropAction(['salesforceId']))}
        />
      </FormRow>
      <FormRow label="Comments">
        <TextField
          multiline
          minRows={3}
          maxRows={3}
          inputProps={{ maxLength: COMMENTS_MAX_LENGTH }}
          size={size}
          placeholder="Enter Comments"
          value={comments}
          onChange={(e) => handleSetState({ comments: e.target.value })}
        />
      </FormRow>
      <FormRow label="Play from CO">
        <Switch
          size={size}
          color="primary"
          checked={playFromCo}
          onChange={({ target }) =>
            handleSetState({
              playFromCo: target.checked,
            })
          }
        />
      </FormRow>
      <FormRow label="Call to action">
        <Switch
          size={size}
          color="primary"
          checked={callToAction}
          onChange={({ target }) =>
            handleSetState({
              callToAction: target.checked,
            })
          }
        />
      </FormRow>
      <FormRow label="Account">
        <Stack fullWidth>
          <Autocomplete
            fullWidth
            value={account}
            options={accountOptions || []}
            loading={!accountOptions}
            size={size}
            filterSelectedOptions
            disableClearable
            onChange={(e, selected) => {
              handleSetState({
                account: selected,
              });
            }}
            onOpen={() => {
              dispatch(getAccountOptionsAction(''));
            }}
            onInputChange={(e, searchText) => dispatch(getAccountOptionsAction(searchText))}
            renderInput={(params) => (
              <TextField
                {...params}
                value=""
                placeholder="Select Account"
                {...getInputPropsByName(scheme, ['account'])}
                onFocus={() => dispatch(removeErrorByPropAction(['account']))}
              />
            )}
          />
          {notAllowedConnectPublicCoWithNonPublicAccount && (
            <Typography variant="caption" color="warning.dark" fontWeight={400}>
              You cannot connect a public content owner to an account of this type. Please set Public to OFF for select
              account.
            </Typography>
          )}
        </Stack>
      </FormRow>
      <FormRow label="Type">
        <Select
          size={size}
          placeholder="Select type"
          value={type || TYPE_PUBLISHER}
          onChange={(event) =>
            handleSetState({
              type: event.target.value,
            })
          }
        >
          {TYPES_OPTIONS.map((option) => (
            <MenuItem key={option.value} value={option.value}>
              {option.label}
            </MenuItem>
          ))}
        </Select>
      </FormRow>
      <FormRow label="Status">
        <Stack>
          <Switch
            color="primary"
            size={size}
            checked={status}
            onChange={(e) =>
              handleSetState({
                status: e.target.checked,
              })
            }
          />
          {!status && (
            <Typography variant="caption" color="warning.dark" fontWeight={400}>
              Please make sure to archive associated sources
            </Typography>
          )}
        </Stack>
      </FormRow>
      <FormRow label="Public">
        <Switch
          color="primary"
          size={size}
          checked={isPublic}
          onChange={(e) =>
            handleSetState({
              isPublic: e.target.checked,
            })
          }
        />
      </FormRow>
      <FormRow label="Source Priority">
        <TextField
          type="number"
          size={size}
          placeholder="Enter Source Priority"
          value={feedPriority}
          onChange={(e) => handleSetState({ feedPriority: e.target.value })}
        />
      </FormRow>
    </>
  );
}

export default GeneralTab;
