import PropTypes from 'prop-types';
import { useMemoizedFn } from 'ahooks';
import mailOutlineRoundedIcon from '@iconify-icons/material-symbols/mail-outline-rounded';
import { LOGIN_PROVIDER, LOGIN_PROVIDER_NAME } from '@arcblock/ux/lib/Util/constant';

import LoginMethodItem from '../../components/login-item/login-method-item';
import { useStateContext } from '../../contexts/state';

export default function EmailListItem({ ...rest }) {
  const { setSelectedPlugin, getPlugin, connectState } = useStateContext();
  const handleConnect = useMemoizedFn(() => {
    const plugin = getPlugin(LOGIN_PROVIDER.EMAIL);
    plugin.state.reset();
    plugin.state.status = 'creating';
    connectState.chooseMethod = LOGIN_PROVIDER.EMAIL;
    setSelectedPlugin(plugin);
  });

  return (
    <LoginMethodItem
      {...rest}
      title={LOGIN_PROVIDER_NAME[LOGIN_PROVIDER.EMAIL]}
      icon={mailOutlineRoundedIcon}
      onClick={handleConnect}
    />
  );
}

EmailListItem.propTypes = {
  onClick: PropTypes.func,
};