import React from 'react';
import { PisellText } from '@pisell/materials';
import AppointmentDeposit from "../../deposit";
import { useAppointmentBookingContext } from "../../context";
import { locales } from '@pisell/utils';
import "./index.less";
var Deposit = function Deposit() {
  var _useAppointmentBookin = useAppointmentBookingContext(),
    setIsAgreeDepositPolicy = _useAppointmentBookin.setIsAgreeDepositPolicy,
    isAgreeDepositPolicy = _useAppointmentBookin.isAgreeDepositPolicy,
    summary = _useAppointmentBookin.summary;
  var deposit = summary.deposit;
  return /*#__PURE__*/React.createElement("div", {
    className: "appointment-deposit-wrap"
  }, /*#__PURE__*/React.createElement("div", {
    className: "appointment-deposit-top"
  }, /*#__PURE__*/React.createElement("span", null, locales.getText('pisell2.appointment.deposit')), /*#__PURE__*/React.createElement(PisellText.Amount, {
    value: deposit === null || deposit === void 0 ? void 0 : deposit.total,
    showCurrencySymbol: true,
    className: "amount"
  })), /*#__PURE__*/React.createElement(AppointmentDeposit, {
    total: deposit === null || deposit === void 0 ? void 0 : deposit.total,
    protocols: deposit === null || deposit === void 0 ? void 0 : deposit.protocols,
    isAgreePolicy: isAgreeDepositPolicy,
    onChange: function onChange(value) {
      return setIsAgreeDepositPolicy(value);
    }
  }));
};
export default Deposit;