components#Natures TypeScript Examples

function Member({ index, pokemonDetail }: MemberProps): JSX.Element {
  const { t } = useTranslation('builder');
  const pokemon = POKEMAP.get(pokemonDetail.id);
  const changeTeamMember = useStore(useCallback((state) => state.changeTeamMember, []));
  const deleteTeamMember = useStore(useCallback((state) => state.deleteTeamMember, []));
  const darkMode = useStore(useCallback((state) => state.darkMode, []));
  const [expanded, setExpanded] = useState(false);

  return (
    <>
      <div
        className={styles.member}
        data-testid={`team-poke-${pokemon.text}`}
        style={{ backgroundColor: `${TYPE_COLOR[pokemon.type]}50` }}
      >
        <div className={styles.info}>
          <div className={styles.pokemonImage}>
            <PkmImage name={pokemon?.text} />
          </div>
          <b>{pokemon.text}</b>
        </div>
        <div className={styles.other}>
          <PokemonType pokemon={pokemon} />
          <Icon
            className={styles.arrow}
            style={{ transform: expanded ? 'rotate(90deg)' : undefined }}
            name="angle right"
            onClick={() => setExpanded((prevState) => !prevState)}
          />
        </div>
      </div>
      <div className={`${styles.details} ${expanded ? styles.open : ''}`}>
        <div>
          <Dropdown
            aria-label="nature-selector"
            basic
            className={`${dropdownStyles.dropdown} ${styles.nature}`}
            data-testid={`team-nature-${pokemon?.text}`}
            inline
            lazyLoad
            onChange={(e, data) =>
              changeTeamMember(index, { ...pokemonDetail, nature: data.value as unknown as string })
            }
            options={NATURES}
            placeholder={t('select_nature', { ns: 'calculator' })}
            search
            selection
            value={pokemonDetail.nature ?? ''}
          />
          <Natures />
        </div>
        <Dropdown
          aria-label="ability"
          basic
          className={dropdownStyles.dropdown}
          data-testid={`team-ability-${pokemon?.text}`}
          inline
          lazyLoad
          onChange={(e, data) =>
            changeTeamMember(index, { ...pokemonDetail, ability: data.value as string })
          }
          options={[...new Set(ABILITIES[8])].map((smogonAbility) => {
            return { text: smogonAbility, value: smogonAbility };
          })}
          placeholder={t('select_ability', { ns: 'calculator' })}
          search
          selection
          value={pokemonDetail.ability ?? ''}
        />
        <ItemSelector
          dataTestId={`team-item-${pokemon?.text}`}
          item={pokemonDetail.item}
          onChange={(newItem) => changeTeamMember(index, { ...pokemonDetail, item: newItem })}
        />
        <MoveSelector
          currentMoveId={pokemonDetail?.moves?.length > 0 ? pokemonDetail.moves[0] : null}
          handleMove={(moveId: number) =>
            changeTeamMember(index, {
              ...pokemonDetail,
              moves: [
                moveId,
                pokemonDetail.moves[1],
                pokemonDetail.moves[2],
                pokemonDetail.moves[3],
              ],
            })
          }
        />
        <MoveSelector
          currentMoveId={pokemonDetail?.moves?.length > 1 ? pokemonDetail.moves[1] : null}
          handleMove={(moveId: number) =>
            changeTeamMember(index, {
              ...pokemonDetail,
              moves: [
                pokemonDetail.moves[0],
                moveId,
                pokemonDetail.moves[2],
                pokemonDetail.moves[3],
              ],
            })
          }
        />
        <MoveSelector
          currentMoveId={pokemonDetail?.moves?.length > 2 ? pokemonDetail.moves[2] : null}
          handleMove={(moveId: number) =>
            changeTeamMember(index, {
              ...pokemonDetail,
              moves: [
                pokemonDetail.moves[0],
                pokemonDetail.moves[1],
                moveId,
                pokemonDetail.moves[3],
              ],
            })
          }
        />
        <MoveSelector
          currentMoveId={pokemonDetail?.moves?.length > 3 ? pokemonDetail.moves[3] : null}
          handleMove={(moveId: number) =>
            changeTeamMember(index, {
              ...pokemonDetail,
              moves: [
                pokemonDetail.moves[0],
                pokemonDetail.moves[1],
                pokemonDetail.moves[2],
                moveId,
              ],
            })
          }
        />
        <Button
          className={styles.delete}
          color="red"
          data-testid={`delete-team-${index}`}
          inverted={darkMode}
          onClick={() => deleteTeamMember(index)}
        >
          {t('delete')}
          <Icon className="icon close" />
        </Button>
      </div>
    </>
  );
}

function Detail({ encounter }: DetailProps): JSX.Element {
  const { t } = useTranslation('tracker');
  const darkMode = useStore(useCallback((state) => state.darkMode, []));
  const changeDetails = useStore(useCallback((state) => state.changeDetails, []));
  const exportTeamMember = useStore(useCallback((state) => state.exportTeamMember, []));
  const exportToGame = useStore(useCallback((state) => state.exportToGame, []));
  const selectedGame = useStore(useCallback((state) => state.selectedGame, []));
  const gamesList = useStore(useCallback((state) => state.gamesList, []));
  const soulink = useStore(useCallback((state) => state.soulink, []));
  const isNatureAbilityGen = useStore(selectNAGeneration);
  const isItemGenderGen = useStore(selectItemGeneration);
  const foundPokemon = POKEMAP.get(encounter.pokemon);
  const [show, setShow] = useState(false);
  const [level, setLevel] = useState(encounter?.details?.level);
  const [metLevel, setMetLevel] = useState(encounter?.details?.metLevel);
  const [gender, setGender] = useState(encounter?.details?.gender);
  const [ability, setAbility] = useState(encounter?.details?.ability);
  const [nature, setNature] = useState(encounter?.details?.nature);
  const [item, setItem] = useState(encounter?.details?.item);
  const [faint, setFaint] = useState(encounter?.details?.faint);
  const [moveOne, setMoveOne] = useState(encounter?.details?.moves[0]);
  const [moveTwo, setMoveTwo] = useState(encounter?.details?.moves[1]);
  const [moveThree, setMoveThree] = useState(encounter?.details?.moves[2]);
  const [moveFour, setMoveFour] = useState(encounter?.details?.moves[3]);
  const [shiny, setShiny] = useState(encounter?.details?.shiny);
  const [ivhp, setIvhp] = useState(encounter?.details?.ivhp);
  const [ivatk, setIvatk] = useState(encounter?.details?.ivatk);
  const [ivdef, setIvdef] = useState(encounter?.details?.ivdef);
  const [ivspatk, setIvspatk] = useState(encounter?.details?.ivspatk);
  const [ivspeed, setIvspeed] = useState(encounter?.details?.ivspeed);
  const [ivspdef, setIvspdef] = useState(encounter?.details?.ivspdef);
  const [evhp, setEvhp] = useState(encounter?.details?.evhp);
  const [evatk, setEvatk] = useState(encounter?.details?.evatk);
  const [evdef, setEvdef] = useState(encounter?.details?.evdef);
  const [evspatk, setEvspatk] = useState(encounter?.details?.evspatk);
  const [evspeed, setEvspeed] = useState(encounter?.details?.evspeed);
  const [evspdef, setEvspdef] = useState(encounter?.details?.evspdef);
  const [soulLink, setSoulLink] = useState(encounter?.details?.soulink);

  const limitGen = GAME_GENERATION[selectedGame?.value] || undefined;
  const foundSoulLink = POKEMAP.get(soulLink);

  const handleClose = () => {
    setShow(false);
    setLevel(encounter?.details?.level);
    setMetLevel(encounter?.details?.metLevel);
    setGender(encounter?.details?.gender);
    setAbility(encounter?.details?.ability);
    setNature(encounter?.details?.nature);
    setItem(encounter?.details?.item);
    setFaint(encounter?.details?.faint);
    setMoveOne(encounter?.details?.moves[0]);
    setMoveTwo(encounter?.details?.moves[1]);
    setMoveThree(encounter?.details?.moves[2]);
    setMoveFour(encounter?.details?.moves[3]);
    setShiny(encounter?.details?.shiny);
    setSoulLink(encounter?.details?.soulink);
  };

  const handleSave = () => {
    changeDetails(
      encounter.id,
      level,
      metLevel,
      gender,
      ability,
      nature,
      item,
      faint,
      moveOne,
      moveTwo,
      moveThree,
      moveFour,
      shiny,
      ivhp,
      ivatk,
      ivdef,
      ivspatk,
      ivspdef,
      ivspeed,
      evhp,
      evatk,
      evdef,
      evspatk,
      evspdef,
      evspeed,
      soulLink
    );
    setShow(false);
  };

  const handleExport = () => {
    exportTeamMember({
      ability,
      id: encounter.pokemon,
      level,
      item,
      nature,
      moves: [moveOne, moveTwo, moveThree, moveFour],
    });
    toast.success(t('pokemon_export'));
  };

  const handleGameExport = (game: string) => {
    if (game !== selectedGame?.value) {
      exportToGame(encounter, game, `From ${selectedGame?.text} - ${new Date().toLocaleString()}`);
      handleClose();
      toast.success(t('pokemon_export'));
    }
  };

  const handleDeleteSoulLink = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
    e.preventDefault();
    e.stopPropagation();
    setSoulLink(null);
  };

  return (
    <Modal
      open={show}
      trigger={
        <Button
          aria-label="edit encounter"
          basic
          compact
          data-testid={`edit-encounter-${encounter.id}`}
          icon
          inverted={darkMode}
          onClick={() => setShow(true)}
          type="button"
        >
          <Icon name="pencil" />
        </Button>
      }
    >
      <Modal.Content className={styles.content} scrolling>
        <div className={styles.header}>
          <div className={styles.headerLeft}>
            <div className={styles.image}>
              <PkmImage name={foundPokemon?.text} shiny={shiny} />
            </div>
            <span className={styles.name}>{foundPokemon.text}</span>
          </div>
          <PokemonType pokemon={foundPokemon} />
        </div>
        {soulink && (
          <div className={styles.soulink}>
            <span>Soul Link Pokémon:</span>
            <PokemonSelector handlePokemon={(pokemonId) => setSoulLink(pokemonId)}>
              {soulLink ? (
                <div className={styles.selector} data-testid={`soullink-${encounter.id}`}>
                  <div className={styles.image}>
                    <PkmImage name={foundSoulLink.text} />
                  </div>
                  <span className={styles.soulLinkName}>{foundSoulLink.text}</span>
                  <Button
                    aria-label="delete-soullink"
                    className={styles.deleteSoullink}
                    data-testid={`delete-soullink-${encounter.id}`}
                    icon
                    onClick={handleDeleteSoulLink}
                    style={{ boxShadow: 'none' }}
                  >
                    <Icon name="trash" />
                  </Button>
                </div>
              ) : (
                <div className={styles.selector} data-testid={`soullink-${encounter.id}`}>
                  <span
                    data-testid={`soullink-empty-${encounter.id}`}
                    className={styles.placeholder}
                  >
                    Pokémon...
                  </span>
                </div>
              )}
            </PokemonSelector>
          </div>
        )}
        <details open>
          <summary data-testid="detail-summary">{t('details', { ns: 'badges' })}</summary>
          <div className={styles.expandable}>
            <Input
              className={styles.input}
              data-testid="level"
              maxLength={3}
              label={t('level', { ns: 'rules' })}
              onChange={(e, data) => setLevel(Number(data.value))}
              value={Number.isNaN(level) ? '' : level}
            />
            <Input
              className={styles.input}
              data-testid="metlevel"
              label={t('met_level')}
              maxLength={3}
              onChange={(e, data) => setMetLevel(Number(data.value))}
              value={Number.isNaN(metLevel) ? '' : metLevel}
            />
            {isItemGenderGen && (
              <Dropdown
                aria-label="gender-selector"
                className={dropdownStyles.dropdown}
                clearable
                data-testid="gender"
                inline
                lazyLoad
                onChange={(e, data) => setGender(data.value as unknown as Gender)}
                options={GENDERS}
                placeholder={t('gender', { ns: 'calculator' })}
                selection
                value={gender ?? ''}
              />
            )}
            {isNatureAbilityGen && (
              <div className={styles.natureContainer}>
                <Dropdown
                  aria-label="nature-selector"
                  className={dropdownStyles.dropdown}
                  clearable
                  data-testid="nature"
                  inline
                  lazyLoad
                  onChange={(e, data) => setNature(data.value as unknown as string)}
                  options={NATURES}
                  placeholder={t('select_nature', { ns: 'calculator' })}
                  search
                  selection
                  value={nature ?? ''}
                />
                <Natures />
              </div>
            )}
            {isNatureAbilityGen && (
              <div className={styles.natureContainer}>
                <Dropdown
                  aria-label="ability"
                  className={dropdownStyles.dropdown}
                  clearable
                  data-testid="ability"
                  inline
                  lazyLoad
                  onChange={(e, data) => setAbility(data.value as unknown as string)}
                  options={[...new Set(ABILITIES[8])].map((smogonAbility) => {
                    return { text: smogonAbility, value: smogonAbility };
                  })}
                  placeholder={t('select_ability', { ns: 'calculator' })}
                  search
                  selection
                  value={ability ?? ''}
                />
                <Abilities text={ability ?? ''} />
              </div>
            )}
            {isItemGenderGen && (
              <ItemSelector item={item} onChange={(newItem) => setItem(newItem)} />
            )}
            <Checkbox
              checked={shiny}
              className={styles.checkbox}
              data-testid="shiny"
              label="Shiny"
              onChange={(e, data) => setShiny(data.checked)}
            />
          </div>
        </details>
        <details className={styles.expandable}>
          <summary data-testid="move-summary">Moves</summary>
          <div className={styles.expandable}>
            <div data-testid="move-1">
              <span>Move 1:</span>
              <MoveSelector
                currentMoveId={moveOne}
                handleMove={(moveId: number) => setMoveOne(moveId)}
                limitGen={limitGen}
              />
            </div>
            <div data-testid="move-2">
              <span>Move 2:</span>
              <MoveSelector
                currentMoveId={moveTwo}
                handleMove={(moveId: number) => setMoveTwo(moveId)}
                limitGen={limitGen}
              />
            </div>
            <div data-testid="move-3">
              <span>Move 3:</span>
              <MoveSelector
                currentMoveId={moveThree}
                handleMove={(moveId: number) => setMoveThree(moveId)}
                limitGen={limitGen}
              />
            </div>
            <div data-testid="move-4">
              <span>Move 4:</span>
              <MoveSelector
                currentMoveId={moveFour}
                handleMove={(moveId: number) => setMoveFour(moveId)}
                limitGen={limitGen}
              />
            </div>
          </div>
        </details>

        <details
          className={styles.expandable}
          style={{ display: limitGen > 2 ? undefined : 'none' }}
        >
          <summary data-testid="stats-summary">Stats</summary>
          <div className={styles.expandable}>
            HP:
            <fieldset className={styles.fieldset}>
              <RangeSelector
                name="ivhp"
                value={ivhp ?? 0}
                onChange={(newValue: number) => setIvhp(newValue)}
              />
              <RangeSelector
                name="evhp"
                value={evhp ?? 0}
                onChange={(newValue: number) => setEvhp(newValue)}
              />
            </fieldset>
            ATK:
            <fieldset className={styles.fieldset}>
              <RangeSelector
                name="ivatk"
                value={ivatk ?? 0}
                onChange={(newValue: number) => setIvatk(newValue)}
              />
              <RangeSelector
                name="evatk"
                value={evatk ?? 0}
                onChange={(newValue: number) => setEvatk(newValue)}
              />
            </fieldset>
            DEF:
            <fieldset className={styles.fieldset}>
              <RangeSelector
                name="ivdef"
                value={ivdef ?? 0}
                onChange={(newValue: number) => setIvdef(newValue)}
              />
              <RangeSelector
                name="evdef"
                value={evdef ?? 0}
                onChange={(newValue: number) => setEvdef(newValue)}
              />
            </fieldset>
            SPATK:
            <fieldset className={styles.fieldset}>
              <RangeSelector
                name="ivspatk"
                value={ivspatk ?? 0}
                onChange={(newValue: number) => setIvspatk(newValue)}
              />
              <RangeSelector
                name="evspatk"
                value={evspatk ?? 0}
                onChange={(newValue: number) => setEvspatk(newValue)}
              />
            </fieldset>
            SPDEF:
            <fieldset className={styles.fieldset}>
              <RangeSelector
                name="ivspdef"
                value={ivspdef ?? 0}
                onChange={(newValue: number) => setIvspdef(newValue)}
              />
              <RangeSelector
                name="evspdef"
                value={evspdef ?? 0}
                onChange={(newValue: number) => setEvspdef(newValue)}
              />
            </fieldset>
            SPEED:
            <fieldset className={styles.fieldset}>
              <RangeSelector
                name="ivspeed"
                value={ivspeed ?? 0}
                onChange={(newValue: number) => setIvspeed(newValue)}
              />
              <RangeSelector
                name="evspeed"
                value={evspeed ?? 0}
                onChange={(newValue: number) => setEvspeed(newValue)}
              />
            </fieldset>
          </div>
        </details>
        {encounter?.status?.value === 2 && (
          <label>
            <div>{t('cause_of_fainting')}:</div>
            <textarea
              className={styles.textarea}
              data-testid="cause of fainting"
              maxLength={250}
              onChange={(e) => setFaint(e.target.value)}
              rows={5}
              value={faint}
            />
          </label>
        )}
      </Modal.Content>
      <Modal.Actions>
        <Button onClick={handleClose}>{t('cancel', { ns: 'common' })}</Button>
        <Button onClick={handleExport}>{t('export_to_builder')}</Button>
        <Dropdown
          button
          data-testid="export-to-game"
          onChange={(e, data) => handleGameExport(data.value as string)}
          options={gamesList}
          text={t('export_to_game')}
          value={selectedGame?.value}
        />
        <Button onClick={handleSave} primary>
          {t('save', { ns: 'common' })}
        </Button>
      </Modal.Actions>
    </Modal>
  );
}