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

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

import { FormRow, useFormSettings } from '@/modules/@common/Form';
import { TextField } from '@/mui/components';

const MAX_LENGTH = 512;

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

  const scheme = useSelector(selectors.schemeSelector);

  // selectors
  const impressionTracker = useSelector(selectors.impressionTrackerSelector);
  const clickTracker1 = useSelector(selectors.clickTracker1Selector);
  const clickTracker2 = useSelector(selectors.clickTracker2Selector);

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

  return (
    <>
      <FormRow label="3rd Party Impression Pixel">
        <TextField
          size={size}
          multiline
          minRows={3}
          maxRows={3}
          placeholder="3rd Party Impression Pixel"
          value={impressionTracker}
          inputProps={{ maxLength: MAX_LENGTH }}
          onChange={(e) => handleSetState({ impressionTracker: e.target.value })}
          {...getInputPropsByName(scheme, ['impressionTracker'])}
          onFocus={() => dispatch(removeErrorByPropAction(['impressionTracker']))}
          label=""
        />
      </FormRow>
      <FormRow label="Button 1 3rd Party Click Tracking">
        <TextField
          size={size}
          multiline
          minRows={3}
          maxRows={3}
          placeholder="Button 1 3rd Party Click Tracking"
          value={clickTracker1}
          inputProps={{ maxLength: MAX_LENGTH }}
          onChange={(e) => handleSetState({ clickTracker1: e.target.value })}
          {...getInputPropsByName(scheme, ['clickTracker1'])}
          onFocus={() => dispatch(removeErrorByPropAction(['clickTracker1']))}
          label=""
        />
      </FormRow>
      <FormRow label="Button 2 3rd Party Click Tracking">
        <TextField
          size={size}
          multiline
          minRows={3}
          maxRows={3}
          placeholder="Button 2 3rd Party Click Tracking"
          value={clickTracker2}
          inputProps={{ maxLength: MAX_LENGTH }}
          onChange={(e) => handleSetState({ clickTracker2: e.target.value })}
          {...getInputPropsByName(scheme, ['clickTracker2'])}
          onFocus={() => dispatch(removeErrorByPropAction(['clickTracker2']))}
          label=""
        />
      </FormRow>
    </>
  );
}

export default GeneralTab;
