// @flow
import * as PAGES from 'constants/pages';
import React from 'react';
import Button from 'component/button';
import { FormField } from 'component/common/form';
import { withRouter } from 'react-router';

type Props = {
  setSyncEnabled: boolean => void,
  syncEnabled: boolean,
  verifiedEmail: ?string,
  history: { push: string => void },
  location: UrlLocation,
  getSyncError: ?string,
  disabled: boolean,
};

function SyncToggle(props: Props) {
  const {
    setSyncEnabled,
    syncEnabled,
    verifiedEmail,
    getSyncError,
    history,
    location: { pathname },
    disabled = false,
  } = props;

  function handleChange() {
    setSyncEnabled(!syncEnabled);
  }

  if (getSyncError) {
    history.push(`/$/${PAGES.AUTH}?redirect=${pathname}&immediate=true`);
    return null;
  }

  return (
    <div>
      {!verifiedEmail ? (
        <div>
          <Button requiresAuth button="primary" label={__('Add Email')} />
          <p className="help">{__('An email address is required to sync your account.')}</p>
        </div>
      ) : (
        <FormField
          type="checkbox"
          name="sync_toggle"
          label={__('Sync your balance and preferences across devices.')}
          checked={syncEnabled}
          onChange={handleChange}
          disabled={disabled}
        />
      )}
    </div>
  );
}

export default withRouter(SyncToggle);