Untitled

'use client';
import { ToggleTextarea } from '@/components/ToggleTextarea/ToggleTextarea';
import { withTryCatch } from '@/utils/async';
import { useUpdateMyBio } from '@nerdbord/graphql-api';
import { useState } from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';

interface BioEditorProps {
  bio: string;
  onToggleEdit?(): void;
}

export const BioEditor = (props: BioEditorProps) => {
  const [isEditing, setIsEditing] = useState(false);
  const [bio, setBio] = useState(props.bio);
  const { updateMyBio } = useUpdateMyBio();

  const handleUpdate = () => {
    if (props.bio === bio) {
      handleToggleEdit();
      return;
    }

    withTryCatch(async () => {
      handleToggleEdit();
      await updateMyBio(bio);
    }, 'Bio updated');
  };

  const handleToggleEdit = () => {
    setIsEditing(!isEditing);
  };

  if (!isEditing) {
    return <BioReader onToggleEdit={handleToggleEdit} bio={bio} />;
  }

  return (
    <ToggleTextarea
      value={bio}
      classNames="resize-none w-full min-h-[373px] rounded bg-white text-gray-600 text-m font-normal leading-[150%] font-inter p-6"
      placeholder={
        'You can use markdown to format your bio. E.g. use **bold text**.'
      }
      onChange={(e) => {
        setBio(e.currentTarget.value);
      }}
      onUpdate={handleUpdate}
    />
  );
};

export const BioReader = (props: BioEditorProps) => {
  return (
    <div
      onClick={props.onToggleEdit}
      className="w-full min-h-[220px] md:min-h-[260px] rounded bg-white text-gray-600 font-inter p-6"
    >
      <div className="bio-markdown">
        <ReactMarkdown remarkPlugins={[remarkGfm]}>
          {props.bio || 'This user has not written a bio yet.'}
        </ReactMarkdown>
      </div>
    </div>
  );
};