import React, { useState } from 'react' import Head from 'next/head' import Router, { useRouter } from 'next/router' import { useSnapshot } from 'valtio' import Linkify from 'react-linkify' import classNames from 'classnames' import CharLimitedFieldset from '~components/CharLimitedFieldset' import RaidDropdown from '~components/RaidDropdown' import TextFieldset from '~components/TextFieldset' import { appState } from '~utils/appState' import './index.scss' // Props interface Props { editable: boolean updateCallback: (name?: string, description?: string, raid?: Raid) => void } const PartyDetails = (props: Props) => { const { party, raids } = useSnapshot(appState) const router = useRouter() const nameInput = React.createRef() const descriptionInput = React.createRef() const raidSelect = React.createRef() const readOnlyClasses = classNames({ 'PartyDetails': true, 'ReadOnly': true, 'Visible': !party.detailsVisible }) const editableClasses = classNames({ 'PartyDetails': true, 'Editable': true, 'Visible': party.detailsVisible }) const [errors, setErrors] = useState<{ [key: string]: string }>({ name: '', description: '' }) function handleInputChange(event: React.ChangeEvent) { event.preventDefault() const { name, value } = event.target let newErrors = errors setErrors(newErrors) } function handleTextAreaChange(event: React.ChangeEvent) { event.preventDefault() const { name, value } = event.target let newErrors = errors setErrors(newErrors) } function updateDetails(event: React.ChangeEvent) { const nameValue = nameInput.current?.value const descriptionValue = descriptionInput.current?.value const raid = raids.find(raid => raid.id == raidSelect.current?.value) props.updateCallback(nameValue, descriptionValue, raid) } const editable = (

) const readOnly = (

{ (party.name) ?

{party.name}

: '' } { (party.raid) ?

{party.raid.name.en}

: '' } { (party.description) ?

{party.description}

: '' }

) const generateTitle = () => { let title = '' const username = (party.user != null) ? `@${party.user?.username}` : 'Anonymous' if (party.name != null) title = `${party.name} by ${username}` else if (party.name == null && party.editable && router.route === '/new') title = "New Team" else title = `Untitled team by ${username}` return title } return (

{generateTitle()} {readOnly} {editable}

) } export default PartyDetails