import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useRouter } from 'next/router';

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

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

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

  // selectors
  // const id = useSelector(selectors.idSelector);
  const name = useSelector(selectors.nameSelector);
  const suffix = useSelector(selectors.suffixSelector);
  const helpPageUrl = useSelector(selectors.helpPageUrlSelector);
  const scheme = useSelector(selectors.schemeSelector);

  const userPermissions = useSelector(getUserPermissionsSelector);

  const id = parseInt(router.query.id, 10);
  const canReadOnly = getCanReadOnly(id, userPermissions);

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

  return (
    <>
      <FormRow label="Name">
        <TextField
          size={size}
          placeholder="Enter Name"
          value={name}
          disabled={canReadOnly}
          inputProps={{ maxLength: 45 }}
          onChange={(e) => handleSetState({ name: e.target.value })}
          {...getInputPropsByName(scheme, ['name'])}
          onFocus={() => dispatch(removeErrorByPropAction(['name']))}
        />
      </FormRow>
      <FormRow label="Suffix">
        <TextField
          size={size}
          placeholder="Enter Suffix"
          value={suffix}
          disabled={canReadOnly}
          inputProps={{ maxLength: 256 }}
          onChange={(e) => handleSetState({ suffix: e.target.value })}
          {...getInputPropsByName(scheme, ['suffix'])}
          onFocus={() => dispatch(removeErrorByPropAction(['suffix']))}
        />
      </FormRow>
      <FormRow label="Help Page Url">
        <TextField
          size={size}
          placeholder="Enter help Page Url"
          value={helpPageUrl}
          disabled={canReadOnly}
          inputProps={{ maxLength: 256 }}
          onChange={(e) => handleSetState({ helpPageUrl: e.target.value })}
          {...getInputPropsByName(scheme, ['helpPageUrl'])}
          onFocus={() => dispatch(removeErrorByPropAction(['helpPageUrl']))}
        />
      </FormRow>
    </>
  );
}

export default GeneralTab;
