
import React from 'react';
import { ContentPage } from '../../components/ContentPage';
import { ApiSection } from '../../types';

const valueApi: ApiSection[] = [
  {
    title: 'Chemical.Value',
    description: 'Creates a reactive value container. Changes to this value can be observed, and other reactive objects (like Computeds and Effects) can depend on it.',
    entries: [
      {
        signature: 'Chemical.Value<T>(initialValue: T): Value<T>',
        description: 'Constructs a new reactive Value object.',
        parameters: [
          { name: 'initialValue', type: 'T', description: 'The initial value to store.' },
        ],
        returns: { type: 'Value<T>', description: 'A new Value object.' },
        example: `
local Chemical = require(game.ReplicatedStorage.Chemical)
local Value = Chemical.Value

local myNumber = Value(10)
local myString = Value("hello")
local myTable = Value({ message = "world" })
        `,
      },
    ],
  },
  {
    title: 'Value Methods',
    entries: [
      {
        signature: 'value:get(): T',
        description: 'Retrieves the current value. If called within a Computed or Effect, it establishes a dependency on this Value.',
        returns: { type: 'T', description: 'The current value.' },
        example: `
local Chemical = require(game.ReplicatedStorage.Chemical)
local Value = Chemical.Value

local count = Value(5)
local currentValue = count:get() -- currentValue is 5
        `,
      },
      {
        signature: 'value:set(newValue: T)',
        description: 'Updates the value. This will notify any dependents (Computeds, Effects, Observers) that the value has changed.',
        parameters: [
          { name: 'newValue', type: 'T', description: 'The new value to set.' },
        ],
        example: `
local Chemical = require(game.ReplicatedStorage.Chemical)
local Value = Chemical.Value

local name = Value("Guest")
name:set("User123") -- name:get() will now return "User123"
        `,
      },
      {
        signature: 'value:destroy()',
        description: 'Destroys the Value object, cleaning up its resources and notifying dependents that it no longer exists. Any Effects or Computeds that depend solely on this Value might also be destroyed or cleaned up.',
        example: `
local Chemical = require(game.ReplicatedStorage.Chemical)
local Value = Chemical.Value

local temporaryValue = Value(100)
-- ... use temporaryValue ...
temporaryValue:destroy()
        `,
      },
    ],
  },
  {
    title: 'Numerical Value Methods',
    description: 'These methods are available if the Value was initialized with a number.',
    entries: [
      {
        signature: 'value:increment(n: number)',
        description: 'Increments the numerical value by `n`. If `n` is not provided, it defaults to 1.',
        parameters: [
          { name: 'n', type: 'number', description: 'The amount to increment by (defaults to 1).' },
        ],
        example: `
local Chemical = require(game.ReplicatedStorage.Chemical)
local Value = Chemical.Value

local counter = Value(0)
counter:increment(5) -- counter:get() is now 5
counter:increment()  -- counter:get() is now 6
        `,
      },
      {
        signature: 'value:decrement(n: number)',
        description: 'Decrements the numerical value by `n`. If `n` is not provided, it defaults to 1.',
        parameters: [
          { name: 'n', type: 'number', description: 'The amount to decrement by (defaults to 1).' },
        ],
        example: `
local Chemical = require(game.ReplicatedStorage.Chemical)
local Value = Chemical.Value

local stock = Value(10)
stock:decrement(2) -- stock:get() is now 8
stock:decrement()  -- stock:get() is now 7
        `,
      },
    ],
  },
];

export const ValuePage: React.FC = () => {
  return <ContentPage title="Chemical.Value" sections={valueApi} />;
};
