import { FieldErrorMessage, SaveBtn } from "@/components/common";
import { BasePage } from "@/components/layout";
import {
  priceDecimalsOptions,
  symbolOptions,
} from "@/utils/validators/settings";
import { __ } from "@wordpress/i18n";
import { Col, Form, Row } from "react-bootstrap";
import { useForm } from "react-hook-form";

export const Payments = ({ values, onSubmit }) => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({ values });

  return (
    <BasePage>
      <div>
        <Form noValidate onSubmit={handleSubmit(onSubmit)}>
          <Form.Group
            key={name}
            as={Row}
            controlId="symbol"
            className="form-group"
          >
            <Form.Label column sm={4}>
              {__("Symbol", "yoyaku-manager")}
            </Form.Label>
            <Col sm={4}>
              <Form.Control {...register("symbol", symbolOptions)} />
              {errors.symbol && (
                <FieldErrorMessage message={errors.symbol.message} />
              )}
            </Col>
          </Form.Group>

          <Form.Group
            key={name}
            as={Row}
            controlId="price_symbol_position"
            className="form-group"
          >
            <Form.Label column sm={4}>
              {__("Price Symbol Position", "yoyaku-manager")}
            </Form.Label>
            <Col sm={4}>
              <Form.Select {...register("price_symbol_position")}>
                <option value="before">{__("Before", "yoyaku-manager")}</option>
                <option value="after">{__("After", "yoyaku-manager")}</option>
              </Form.Select>
            </Col>
          </Form.Group>

          <Form.Group
            key={name}
            as={Row}
            controlId="price_thousand_separator"
            className="form-group"
          >
            <Form.Label column sm={4}>
              {__("Price Thousand Separator", "yoyaku-manager")}
            </Form.Label>
            <Col sm={4}>
              <Form.Control {...register("price_thousand_separator")} />
            </Col>
          </Form.Group>

          <Form.Group
            key={name}
            as={Row}
            controlId="price_decimals"
            className="form-group"
          >
            <Form.Label column sm={4}>
              {__("Price Decimals", "yoyaku-manager")}
            </Form.Label>
            <Col sm={4}>
              <Form.Control
                type="number"
                min={0}
                max={3}
                {...register("price_decimals", priceDecimalsOptions)}
              />
              {errors.price_decimals && (
                <FieldErrorMessage message={errors.price_decimals.message} />
              )}
            </Col>
          </Form.Group>

          <Form.Group
            key={name}
            as={Row}
            controlId="price_decimal_separator"
            className="form-group"
          >
            <Form.Label column sm={4}>
              {__("Price Decimal Separator", "yoyaku-manager")}
            </Form.Label>
            <Col sm={4}>
              <Form.Control {...register("price_decimal_separator")} />
            </Col>
          </Form.Group>

          <SaveBtn />
        </Form>
      </div>
    </BasePage>
  );
};

export const getPaymentsSetting = (settings) => {
  return {
    currency: settings.currency,
    symbol: settings.symbol,
    price_symbol_position: settings.price_symbol_position,
    price_decimals: settings.price_decimals,
    price_thousand_separator: settings.price_thousand_separator,
    price_decimal_separator: settings.price_decimal_separator,
    stripe_test_mode: settings.stripe_test_mode,
    stripe_live_secret_key: settings.stripe_live_secret_key,
    stripe_live_publishable_key: settings.stripe_live_publishable_key,
    stripe_test_secret_key: settings.stripe_test_secret_key,
    stripe_test_publishable_key: settings.stripe_test_publishable_key,
  };
};