import React, { useMemo, useRef } from 'react';
import { Button, Form, Slider } from 'antd';
import { Icon } from '@pisell/materials';
import { locales } from '@pisell/utils';
import { MapField } from "./components";
var ClockInMethodTab = function ClockInMethodTab(props) {
  var _Form$useWatch, _Form$useWatch2;
  var form = props.form;
  var maxLocations = 200;
  var mapFieldRef = useRef(null);
  var defaultValidRangeMeters = (_Form$useWatch = Form.useWatch(['place', 'radius'], form)) !== null && _Form$useWatch !== void 0 ? _Form$useWatch : 100;
  var locations = (_Form$useWatch2 = Form.useWatch(['place', 'location'], form)) !== null && _Form$useWatch2 !== void 0 ? _Form$useWatch2 : [];
  var isMaxLocations = Array.isArray(locations) && locations.length >= maxLocations;
  var openAddLocation = function openAddLocation() {
    var _mapFieldRef$current;
    if (isMaxLocations) return;
    (_mapFieldRef$current = mapFieldRef.current) === null || _mapFieldRef$current === void 0 || _mapFieldRef$current.onAddLocation();
  };
  var approvedLocationsLabel = useMemo(function () {
    return locales.getText('pisell2.attendance.group-settings.clock-in-method.approved-locations.label')(maxLocations);
  }, [maxLocations]);
  return /*#__PURE__*/React.createElement("div", {
    className: "saas-attendance-group-settings__panel",
    id: props.id
  }, /*#__PURE__*/React.createElement("div", {
    className: "saas-attendance-group-settings__banner banner-green"
  }, /*#__PURE__*/React.createElement("div", {
    className: "banner-icon"
  }, /*#__PURE__*/React.createElement(Icon, {
    type: "pisell2-marker-pin-01",
    size: 20
  })), /*#__PURE__*/React.createElement("div", {
    className: "banner-body"
  }, /*#__PURE__*/React.createElement("div", {
    className: "banner-title"
  }, locales.getText('pisell2.attendance.group-settings.clock-in-method.gps.title')), /*#__PURE__*/React.createElement("div", {
    className: "banner-desc"
  }, locales.getText('pisell2.attendance.group-settings.clock-in-method.gps.desc')))), /*#__PURE__*/React.createElement("div", {
    className: "saas-attendance-group-settings__section"
  }, /*#__PURE__*/React.createElement("div", {
    className: "saas-attendance-group-settings__section-head"
  }, /*#__PURE__*/React.createElement("div", {
    className: "saas-attendance-group-settings__section-title"
  }, approvedLocationsLabel), /*#__PURE__*/React.createElement(Button, {
    type: "primary",
    icon: /*#__PURE__*/React.createElement(Icon, {
      type: "pisell2-plus",
      size: 16
    }),
    onClick: openAddLocation,
    disabled: isMaxLocations
  }, locales.getText('pisell2.attendance.group-settings.actions.add-location'))), /*#__PURE__*/React.createElement(Form.Item, {
    name: ['place', 'location'],
    style: {
      marginBottom: 0
    }
  }, /*#__PURE__*/React.createElement(MapField, {
    ref: mapFieldRef,
    defaultRadius: defaultValidRangeMeters
  }))), /*#__PURE__*/React.createElement("div", {
    className: "saas-attendance-group-settings__section"
  }, /*#__PURE__*/React.createElement("div", {
    className: "saas-attendance-group-settings__section-title"
  }, locales.getText('pisell2.attendance.group-settings.clock-in-method.default-valid-range.label')), /*#__PURE__*/React.createElement("div", {
    className: "saas-attendance-group-settings__slider-row"
  }, /*#__PURE__*/React.createElement(Form.Item, {
    name: ['place', 'radius'],
    style: {
      marginBottom: 0,
      flex: 1
    }
  }, /*#__PURE__*/React.createElement(Slider, {
    min: 0,
    max: 1000
  })), /*#__PURE__*/React.createElement("div", {
    className: "saas-attendance-group-settings__slider-value"
  }, locales.getText('pisell2.attendance.group-settings.clock-in-method.meters')(defaultValidRangeMeters || 0))), /*#__PURE__*/React.createElement("div", {
    className: "saas-attendance-group-settings__help"
  }, locales.getText('pisell2.attendance.group-settings.clock-in-method.default-valid-range.desc'))));
};
export default ClockInMethodTab;