import { FormikProps, withFormik } from 'formik';
import React from 'react';
import { setExplorer } from '../../application/redux/actions/app';
import { ProxyStoreDispatch } from '../../application/redux/proxyStore';
import Button from './button';
import Input from './input';
import * as Yup from 'yup';
import { NetworkString } from 'ldk';

interface SettingsExplorerFormValues {
  esploraURL: string;
  electrsURL: string;
  network: NetworkString;
}

interface SettingsExplorerFormProps {
  dispatch: ProxyStoreDispatch;
  network: NetworkString;
  onDone: () => void;
}

const SettingsExplorerForm = (props: FormikProps<SettingsExplorerFormValues>) => {
  const { handleSubmit, isSubmitting, errors } = props;

  return (
    <form onSubmit={handleSubmit}>
      <p className="font-sm mt-8 mb-1">Custom explorer</p>

      <p className="font-sm mt-5 mb-1 text-left">Esplora URL</p>
      <Input name="esploraURL" placeholder="Esplora valid endpoint" type="text" {...props} />

      <p className="font-sm mt-5 mb-1 text-left">Electrs URL</p>
      <Input name="electrsURL" placeholder="Electrs valid endpoint" type="text" {...props} />

      <div className="bottom-10 right-8 absolute flex justify-end">
        <div>
          <Button disabled={!!errors.esploraURL || isSubmitting} type="submit">
            Update
          </Button>
        </div>
      </div>
    </form>
  );
};

const SettingsCustomExplorerForm = withFormik<
  SettingsExplorerFormProps,
  SettingsExplorerFormValues
>({
  mapPropsToValues: (props): SettingsExplorerFormValues => ({
    network: props.network,
    esploraURL: '',
    electrsURL: '',
  }),

  validationSchema: Yup.object().shape({
    esploraURL: Yup.string().required('An explorer URL is required'),
    electrsURL: Yup.string().required('A web explorer URL is required'),
  }),

  handleSubmit: async (values, { props }) => {
    await props.dispatch(
      setExplorer(
        { type: 'Custom', esploraURL: values.esploraURL, electrsURL: values.electrsURL },
        props.network
      )
    );

    props.onDone();
  },

  displayName: 'SettingsExplorerForm',
})(SettingsExplorerForm);

export default SettingsCustomExplorerForm;