import React, { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux';
import { apiLoadOtherSettings, apiSaveOtherSettings } from '../../api/otherSettingApi';
import { loadOtherSettings, updateOtherSetting } from '../../reducers/other-settings';
import CheckboxField from '../fields/CheckboxField';
import TextField from '../fields/TextField';
import Heading from '../Heading'
import Loading from '../Loading';
import SaveButton from '../SaveButton'
import TableRowOtherSetting from '../TableRowOtherSetting'

const OtherSettingsTab = () => {
  const [saving, setSaving] = useState(false);

  const dispatch = useDispatch();
  const loaded = useSelector(state => {
    return state.otherSettings.loaded;
  });
  useEffect(() => {
    if (!loaded) {
      apiLoadOtherSettings(response => {
        dispatch(loadOtherSettings(response));
      });
    }
  }, [loaded]);
  const otherSettings = useSelector(state => {
    return state.otherSettings.data;
  });
  const handleChangeProperty = (value, propName) => {
    let data = {}
    data[propName] = value
    dispatch(updateOtherSetting(data, () => {}))
  }
  const handleSaveChanges = (e) => {
    e.preventDefault();
    setSaving(true);
    apiSaveOtherSettings(otherSettings, response => {
      setSaving(false);
    })
  }
  return (
    <div className="dreamfox-tab">
      <Heading text="Other Settings" />
      {!loaded && <Loading message="Loading..." />}
      {loaded &&
        <div className="dreamfox-tab__content">
          <h3>Other Settings</h3>
          <table className="dreamfox-table-other">
            <tbody>
              <TableRowOtherSetting htmlFor="required" label="Delivery date a required">
                <CheckboxField options={{
                  name: 'required',
                  checked: otherSettings.required,
                  onChange: e => handleChangeProperty(e.target.checked, 'required')
                }} />
              </TableRowOtherSetting>
              <TableRowOtherSetting htmlFor="showEmptyOnCheckout" label="Show Empty Delivery date on Checkout Page default">
              <CheckboxField options={{
                name: 'showEmptyOnCheckout',
                checked: otherSettings.showEmptyOnCheckout,
                onChange: e => handleChangeProperty(e.target.checked, 'showEmptyOnCheckout')
              }} />
              </TableRowOtherSetting>
              <TableRowOtherSetting htmlFor="labelOnCheckout" label="Delivery Date Label on Checkout Page">
                <TextField options={{
                  name: "labelOnCheckout",
                  value: otherSettings.labelOnCheckout,
                  onChange: e => handleChangeProperty(e.target.value, 'labelOnCheckout')
                }} />
              </TableRowOtherSetting>
              <TableRowOtherSetting htmlFor="descriptionOnCheckout" label="Delivery Date Field Description on Checkout Page">
                <TextField options={{
                  name: "descriptionOnCheckout",
                  value: otherSettings.descriptionOnCheckout,
                  onChange: e => handleChangeProperty(e.target.value, 'descriptionOnCheckout')
                }} />
              </TableRowOtherSetting>
            </tbody>
          </table>
          <SaveButton saving={saving} onClick={handleSaveChanges} />
        </div>
      }
    </div>
  )
}

export default OtherSettingsTab
