5chan/src/components/modals/CreateBoardModal.jsx

import React, { useEffect, useRef, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import {
  useAccount,
  useCreateSubplebbit,
  // useSubplebbits, useAccountSubplebbits
} from '@plebbit/plebbit-react-hooks';
import { StyledModal } from '../styled/modals/CreateBoardModal.styled';
import useGeneralStore from '../../hooks/stores/useGeneralStore';
import Modal from 'react-modal';
import useError from '../../hooks/useError';
import useSuccess from '../../hooks/useSuccess';

const CreateBoardModal = ({ isOpen, closeModal }) => {
  const { selectedStyle } = useGeneralStore((state) => state);

  const account = useAccount();
  const navigate = useNavigate();

  const nodeRef = useRef(null);
  const ruleInputRef = useRef(null);

  const [, setNewErrorMessage] = useError();
  const [, setNewSuccessMessage] = useSuccess();

  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');
  const [avatar, setAvatar] = useState('');
  const [moderators, setModerators] = useState('');
  const [rule, setRule] = useState('');
  const [rules, setRules] = useState([]);
  const [editIndex, setEditIndex] = useState(-1);

  const handleAddRule = () => {
    if (rule.trim() === '') {
      setNewErrorMessage('Rule field is empty');
      return;
    }

    if (rules.length >= 15) {
      setNewErrorMessage('Maximum number of rules is 15');
      return;
    }

    if (editIndex > -1) {
      setRules(rules.map((r, i) => (i === editIndex ? rule : r)));
      setEditIndex(-1);
    } else {
      setRules([...rules, rule]);
    }
    setRule('');
  };

  useEffect(() => {
    if (ruleInputRef.current) {
      ruleInputRef.current.focus();
    }
  }, [rules]);

  const handleKeyDown = (e) => {
    if (e.key === 'Enter') {
      handleAddRule();
    }
  };

  const handleEditRule = (index) => {
    setRule(rules[index]);
    setEditIndex(index);
    ruleInputRef.current.focus();
  };

  const handleDeleteRule = (index) => {
    if (index === editIndex) {
      setEditIndex(-1);
    }
    setRules(rules.filter((_, i) => i !== index));
  };

  const createSubplebbitOptions = {
    title: title || undefined,
    description: description || undefined,
    suggested: {
      avatarUrl: avatar || undefined,
    },
    roles: moderators || undefined,
    rules: rules || undefined,
  };

  const resetFields = () => {
    setTitle('');
    setDescription('');
    setAvatar('');
    setModerators('');
    setRule('');
    setRules([]);
  };

  const { createdSubplebbit, createSubplebbit } = useCreateSubplebbit(createSubplebbitOptions);

  const handleCreateBoard = async () => {
    let moderatorAddresses = moderators.trim() ? moderators.split(',').map((addr) => addr.trim()) : [];
    let invalidAddresses = moderatorAddresses.filter((addr) => !(addr.endsWith('.eth') || (addr.startsWith('12D3KooW') && addr.length === 52)));

    if (invalidAddresses.length > 0) {
      setNewErrorMessage('Invalid moderator addresses: ' + invalidAddresses.join(', '));
      return;
    }

    const roles = {};
    moderatorAddresses.forEach((addr) => {
      roles[addr] = { role: 'moderator' };
    });
    roles[account.author.address] = { role: 'admin' };

    let createSubplebbitOptions = {
      roles: roles,
    };

    if (title) {
      createSubplebbitOptions.title = title;
    }

    if (description) {
      createSubplebbitOptions.description = description;
    }

    if (avatar) {
      createSubplebbitOptions.suggested = {
        avatarUrl: avatar,
      };
    }

    if (rules.length > 0) {
      createSubplebbitOptions.rules = rules;
    }

    try {
      await createSubplebbit(createSubplebbitOptions);
    } catch (error) {
      setNewErrorMessage(error.message);
    }

    if (createdSubplebbit) {
      resetFields();
      closeModal();
      setNewSuccessMessage('Board created successfully, address: ' + createdSubplebbit.address);
      navigate(`/p/${createdSubplebbit.address}`);
    }
  };

  // remove after testing:
  // const {accountSubplebbits} = useAccountSubplebbits()
  // const ownerSubplebbitAddresses = Object.keys(accountSubplebbits).map(subplebbitAddress => accountSubplebbits[subplebbitAddress].role === 'owner')
  // const subplebbits = useSubplebbits({subplebbitAddresses: ownerSubplebbitAddresses})
  // console.log(subplebbits);

  return (
    <StyledModal
      isOpen={isOpen}
      onRequestClose={closeModal}
      contentLabel='Create Board'
      selectedStyle={selectedStyle}
      style={{ overlay: { backgroundColor: 'rgba(0,0,0,.25)' } }}
    >
      <div className='modal-content' ref={nodeRef}>
        <div className='modal-header'>
          Create Board
          <button className='icon' onClick={() => closeModal()} title='close' />
        </div>
        <ul id='form'>
          <div id='explaination'>
            NOTE: plebbit is P2P, your board will stay online for as long as you leave the plebchan desktop app (full node) connected to the Internet.
          </div>
          <li className='settings-option disc'>Title</li>
          <div className='settings-tip'>Optional, useful to describe the board next to its p/address.</div>
          <div className='settings-input'>
            <input id='name' type='text' value={title} onChange={(e) => setTitle(e.target.value)} placeholder='Board Title' />
          </div>
          <li className='settings-option disc'>Description</li>
          <div className='settings-tip'>Optional, displayed as sticky with the board's avatar if set.</div>
          <div className='settings-input'>
            <textarea id='description' type='text' value={description} onChange={(e) => setDescription(e.target.value)} placeholder='Add a description' />
          </div>
          <li className='settings-option disc'>Avatar</li>
          <div className='settings-tip'>Optional, set an image that represents your board.</div>
          <div className='settings-input'>
            <input id='name' type='text' value={avatar} onChange={(e) => setAvatar(e.target.value)} placeholder='https://example.com/image.png' />
          </div>
          <li className='settings-option disc'>Moderators</li>
          <div className='settings-tip'>Optional, let other users help you moderate your board.</div>
          <div className='settings-input'>
            <textarea id='name' type='text' value={moderators} onChange={(e) => setModerators(e.target.value)} placeholder='username.eth, 12D3KooW..., username2.eth' />
          </div>
          <li className='settings-option disc'>Rules</li>
          <div className='settings-tip'>Optional, listed in a sticky on top. Maximum 15 rules.</div>
          <div className='settings-input'>
            <input ref={ruleInputRef} id='rule' type='text' value={rule} onChange={(e) => setRule(e.target.value)} onKeyDown={handleKeyDown} placeholder='Add a rule' />
          </div>
          <button style={{ display: rules.length > 0 ? 'none' : 'block' }} id='rule-btn' className={rules.length > 0 ? 'relative' : ''} onClick={handleAddRule}>
            {editIndex > -1 ? 'Update Rule' : 'Add Rule'}
          </button>
          {rules.length > 0 && (
            <fieldset>
              <legend>
                <button className={rules.length > 0 ? 'relative' : ''} onClick={handleAddRule}>
                  {editIndex > -1 ? 'Update Rule' : 'Add Rule'}
                </button>
              </legend>
              {rules.map((rule, index) => (
                <div key={index} className='rule-item'>
                  <p>
                    {index + 1}. {rule}
                  </p>
                  <button onClick={() => handleEditRule(index)}>Edit</button>
                  <button onClick={() => handleDeleteRule(index)}>Delete</button>
                </div>
              ))}
            </fieldset>
          )}
          <button onClick={handleCreateBoard} id='create-board-btn'>
            Create Board
          </button>
        </ul>
      </div>
    </StyledModal>
  );
};

Modal.setAppElement('#root');

export default CreateBoardModal;