// @flow
import { COMMENT_SERVER_NAME } from 'config';
import React from 'react';
import Comments from 'comments';
import { FormField } from 'component/common/form';

const DEBOUNCE_TEXT_INPUT_MS = 500;

type Props = {
  customServerEnabled: boolean,
  customServerUrl: string,
  setCustomServerEnabled: (boolean) => void,
  setCustomServerUrl: (string) => void,
};

function SettingCommentsServer(props: Props) {
  const { customServerEnabled, customServerUrl, setCustomServerEnabled, setCustomServerUrl } = props;
  const [customUrl, setCustomUrl] = React.useState(customServerUrl);

  React.useEffect(() => {
    const timer = setTimeout(() => {
      setCustomServerUrl(customUrl);
      Comments.url = customUrl;
    }, DEBOUNCE_TEXT_INPUT_MS);

    return () => clearTimeout(timer);
  }, [customUrl, setCustomServerUrl]);

  return (
    <React.Fragment>
      <fieldset-section>
        <FormField
          type="radio"
          name="use_default_comments_server"
          label={__('Default comments server (%name%)', { name: COMMENT_SERVER_NAME })}
          checked={!customServerEnabled}
          onChange={(e) => {
            if (e.target.checked) {
              setCustomServerEnabled(false);
            }
          }}
        />
        <FormField
          type="radio"
          name="use_custom_comments_server"
          label={__('Custom comments server')}
          checked={customServerEnabled}
          onChange={(e) => {
            if (e.target.checked) {
              setCustomServerEnabled(true);
            }
          }}
        />

        {customServerEnabled && (
          <div className="section__body">
            <FormField
              type="text"
              placeholder="https://comment.mysite.com"
              value={customUrl}
              onChange={(e) => setCustomUrl(e.target.value)}
            />
          </div>
        )}
      </fieldset-section>
    </React.Fragment>
  );
}

export default SettingCommentsServer;