import React from 'react';

import type { GeneralSizeProp } from '@/mui/types';

import { getInputPropsByName } from '@/modules/@common/Form/helpers';
import { passwordSelector, schemeSelector } from '@/modules/feeds/Editor/redux/selectors';
import { removeErrorByPropAction, setAction } from '@/modules/feeds/Editor/redux/slices';

import { useFormSettings } from '@/modules/@common/Form';
import { useAppDispatch, useAppSelector } from '@/modules/@common/store/hooks';
import { TextField } from '@/mui/components';

type PropTypes = {
  disabled?: boolean;
  placeholder?: string;
  label?: string;
};

const NAME_MAX_LENGTH = 255;

function Password({ disabled = false, placeholder = 'Enter Password', label = '' }: PropTypes) {
  const dispatch = useAppDispatch();
  const { size } = useFormSettings();

  const scheme = useAppSelector(schemeSelector);
  const password = useAppSelector(passwordSelector);

  return (
    <TextField
      size={size as GeneralSizeProp}
      type="password"
      placeholder={placeholder}
      value={password}
      disabled={disabled}
      inputProps={{ maxLength: NAME_MAX_LENGTH }}
      autoComplete="new-password"
      {...getInputPropsByName(scheme, ['password'])}
      label={label}
      name="external_p"
      onChange={(e) => dispatch(setAction({ password: e.target.value }))}
      onFocus={() => dispatch(removeErrorByPropAction(['password']))}
    />
  );
}

export default Password;
