import { useCodeTimer } from "@appello/common";

const { seconds, isStart, sendCode } = useCodeTimer();

const Component = () => {
  return (
    <div>
      ...
      {
        isStart && (
          <span>{seconds}</span>
        )
      }
      <button type="button" onClick={sendCode} />
      ...
    </div>
  );
};

import { useCombinedRef } from '@appello/common';

const Component = () => {
  const firstRef = useRef<number>(0);
  const secondRef = useRef<number>(0);
  const combinedRef = useCombinedRef(firstRef, secondRef);

  combinedRef(5);
}

import { useDebounceCallback } from '@appello/common';

const Component = () => {
  const [value, setValue] = useState(0);
  const { debounce } = useDebounceCallback(
    () => {
      setValue(value + 1);
    },
  );

  return (
    <button type="button" onClick={debounce}>
      Click
    </button>
  );
};

import { useDebounceEffect } from '@appello/common';

const Component = () => {
  const [value, setValue] = useState('hello');
  const [records, setRecords] = useState<string[]>([]);

  useDebounceEffect(
    () => {
      setRecords((val) => [...val, value]);
    },
    [value],
  );

  return (
    <>
      <input
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder="Write text"
      />
      <ul>
        {records.map((record, index) => (
          <li key={index}>{record}</li>
        ))}
      </ul>
    </>
  );
};

import { useFirstMountState } from '@appello/common';

const Component = () => {
  const isFirstMount = useFirstMountState();
  return console.log(isFirstMount)
};

import { useInterval } from '@appello/common';

const Component = () => {
  const { start } = useInterval({
    fn: () => {
      console.log('Privet')
    },
  });

  return (
    <button type="button" onClick={start}>
      Start timer
    </button>
  )
};

import { useLatest } from "@appello/common";

const Component = () => {
  const [count, setCount] = useState(0);
  const latestCountRef = useLatest(count);

  useEffect(() => {
    const interval = setInterval(() => {
      setCount(latestCountRef.current + 1);
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return (
    <>
      <p>count: {count}</p>
    </>
  );
};

import { useManualUpdate } from '@appello/common';

const Component = () => {
  const update = useManualUpdate();

  return (
    <>
      <div>Time: {Date.now()}</div>
      <button type="button" onClick={update}>
        Update
      </button>
    </>
  );
};

import { useMemoCallback } from '@appello/common';

const Component = () => {
  const [count, setCount] = useState(0);

  const memoCallback = useMemoCallback(() => {
    message.info(`Current count is ${count}`);
  });

  return (
    <>
      <p>count: {count}</p>
      <button
        type="button"
        onClick={() => setCount((v) => v + 1)}
      >
        Add Count
      </button>
      <button type="button" onClick={memoCallback}>
        Call
      </button>
    </>
  );
};

import { useMountEffect } from '@appello/common';

const Component = () => {
  useMountEffect(() => {
    console.log("Mount")
  })

  return (
    <span>component</span>
  );
};

import { usePrevious } from '@appello/common';

const Component = () => {
  const [count, setCount] = useState(0);
  const previous = usePrevious(count);
  
  return (
    <>
      <div>counter current value: {count}</div>
      <div>counter previous value: {previous}</div>
      <button type="button" onClick={() => setCount((c) => c + 1)}>
        increase
      </button>
      <button type="button" onClick={() => setCount((c) => c - 1)}>
        decrease
      </button>
    </>
  );
};

import { useQueryParamsBuilder } from '@appello/common';

const Component = () => {
  const [getService, { data }] = useAnyRequest();

  const { updateQueryParams } = useQueryParamsBuilder({
    queryCb: params => getService(params),
    defaultParams: {
      categoryId,
      search: '',
    },
  });
  
  return (
    <></>
  );
};

import { useSelectOptions } from '@appello/common';

const Component = () => {
  const convertedOptions = useSelectOptions([
    {
      val: 1,
      text: 'Select 1',
    },
    {
      val: 2,
      text: 'Select 2',
    },
  ], {
    label: 'text',
    value: 'val',
  })

  return (
    <span>{JSON.stringify(convertedOptions)}</span>
  );
};

import { useStateObject } from "@appello/common";
import { setState } from "jest-circus";

const Component = () => {
  const [state, setState] = useStateObject({
    name: "Test",
    lastName: "Jest",
    age: 21
  });

  return (
    <>
      <span>{JSON.stringify(state)}</span>
      <button
        type="button"
        onClick={() => {
          setState(prev => ({
            age: prev.age + 25
          }));
        }}
      >
        Update using callback
      </button>
      <button
        type="button"
        onClick={() => {
          setState({
            name: "New",
            lastName: "Test"
          });
        }}
      >
        Update using object
      </button>
    </>
  );
};

import { useSwitchValue } from "@appello/common";

const Component = () => {
  const { value, on, off, toggle } = useSwitchValue(false);

  return (
    <>
      <p>{`${value}`}</p>
      <p>
        <button type="button" onClick={on}>
          On
        </button>
        <button type="button" onClick={off} style={{ margin: "0 8px" }}>
          Off
        </button>
        <button type="button" onClick={toggle}>
          Toggle
        </button>
      </p>
    </>
  );
};

import { useUnmountEffect } from "@appello/common";

const Component = () => {
  useUnmountEffect(() => {
    console.log('Unmount');
  });

  return <p>Hello World!</p>;
};

import { useUpdateEffect } from "@appello/common";

const Component = () => {
  const [count, setCount] = useState(0);
  const [updateEffectCount, setUpdateEffectCount] = useState(0);

  useUpdateEffect(() => {
    setUpdateEffectCount((c) => c + 1);
  }, [count]);

  return (
    <div>
      <p>updateEffectCount: {updateEffectCount}</p>
      <button type="button" onClick={() => setCount((c) => c + 1)}>
        reRender
      </button>
    </div>
  );
};

import { useFormPersist } from "@appello/common";
import { Controller } from 'react-hook-form';
import AsyncStorage from '@react-native-async-storage/async-storage';

type FormType = {
  name: string;
  email: string;
}

const Component = () => {
  const [count, setCount] = useState(0);
  const [updateEffectCount, setUpdateEffectCount] = useState(0);

  const { syncFromStorage, syncToStorage } = useFormPersist<FormType>({
    key: 'StorageKey',
    storage: AsyncStorage,
  });

  const {
    control,
    submit,
    watch,
    formState: { defaultValues },
  } = useForm<ProfileAccountSchemaType>({
    schema: ProfileAccountSchema,
    defaultValues: () => {
      // Sync data form storage (you can select sync-policy)
      return syncFromStorage({
        defaultValues: {
          name: '',
          email: ''
        },
      });
    },
  })

  // Sync to storage
  syncToStorage(watch());

  return (
    <div>
      <Controller
        control={control}
        name="name"
        render={({ field: { value, onChange } }) => (
          <input
            type="text"
            value={value}
            onChange={onChange}
          />
        )}
      />
    </div>
  );
};