import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _extends from "@babel/runtime/helpers/extends";
import React, { useState } from 'react';
import FormGroup from './FormGroup';
import TextInput from '../TextInput';
import NumberInput from '../NumberInput';
import CreatableSelect from 'react-select/creatable';
import markdown from './README.mdx';
export default {
  title: 'Components/Forms/FormGroup',
  component: FormGroup,
  parameters: {
    componentSubtitle: 'Component',
    status: 'released',
    mdx: markdown,
    showFeedback: true
  }
};
export var Default = function Default(args) {
  return /*#__PURE__*/React.createElement(FormGroup, _extends({}, args, {
    className: "wfp--form-long"
  }), /*#__PURE__*/React.createElement(TextInput, {
    id: "test11",
    labelText: "Text Input label",
    placeholder: "Placeholder text"
  }), /*#__PURE__*/React.createElement(TextInput, {
    id: "test21",
    labelText: "Text Input label",
    placeholder: "Placeholder text"
  }), /*#__PURE__*/React.createElement(TextInput, {
    id: "test31",
    labelText: "Text Input label",
    placeholder: "Placeholder text"
  }));
};
Default.args = {
  legendText: 'FormGroup heading'
};
var options = [{
  value: 'afghanistan',
  label: 'Afghanistan (AF)'
}, {
  value: 'albania',
  label: 'Albania'
}, {
  value: 'algeria',
  label: 'Algeria'
}];
var cities = [{
  country: 'afghanistan',
  cityoptions: [{
    value: 'kabul',
    label: 'Kabul'
  }, {
    value: 'kandahar',
    label: 'Kandahar'
  }, {
    value: 'kerat',
    label: 'Herat'
  }]
}, {
  country: 'albania',
  cityoptions: [{
    value: 'ballsh',
    label: 'ballsh'
  }, {
    value: 'Fier',
    label: 'Fier'
  }, {
    value: 'Labinot-Mal',
    label: 'Labinot-Mal'
  }]
}, {
  country: 'algeria',
  cityoptions: [{
    value: 'algiers',
    label: 'Algiers'
  }, {
    value: 'oran',
    label: 'Oran'
  }, {
    value: 'constantine',
    label: 'Constantine'
  }]
}];
export var AddressDetails = function AddressDetails(args) {
  var _useState = useState(null),
      _useState2 = _slicedToArray(_useState, 2),
      cityoption = _useState2[0],
      setcityoption = _useState2[1];

  var handleChange = function handleChange(newValue) {
    var selectedCountry = cities.find(function (city) {
      return city.country === newValue.value;
    });
    setcityoption(selectedCountry.cityoptions);
  };

  var handleCityChange = function handleCityChange(newValue) {// console.log(newValue);
  };

  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormGroup, _extends({}, args, {
    className: "wfp--form-long",
    align: "horizontal",
    legendText: "Address Info",
    style: {
      marginTop: '1rem'
    }
  }), /*#__PURE__*/React.createElement("div", {
    className: "wfp--form-item",
    style: {
      minWidth: '100px'
    }
  }, /*#__PURE__*/React.createElement("label", {
    htmlFor: "country",
    className: "wfp--label"
  }, "Country*"), /*#__PURE__*/React.createElement(CreatableSelect, {
    className: "wfp--react-select-container",
    classNamePrefix: "wfp--react-select",
    onChange: handleChange,
    options: options
  })), /*#__PURE__*/React.createElement("div", {
    className: "wfp--form-item",
    style: {
      minWidth: '100px'
    }
  }, /*#__PURE__*/React.createElement("label", {
    htmlFor: "city",
    className: "wfp--label"
  }, "City*"), /*#__PURE__*/React.createElement(CreatableSelect, {
    className: "wfp--react-select-container",
    classNamePrefix: "wfp--react-select",
    isClearable: true,
    onChange: handleCityChange,
    options: cityoption
  })), /*#__PURE__*/React.createElement(TextInput, {
    id: "zipcode",
    labelText: "Postal code/ZIP code",
    placeholder: "eg: 13-3456"
  })), /*#__PURE__*/React.createElement(FormGroup, _extends({}, args, {
    className: "wfp--form-long",
    align: "horizontal"
  }), /*#__PURE__*/React.createElement(TextInput, {
    id: "street",
    labelText: "Street",
    placeholder: "eg: Chemin Aime Steinlein"
  }), /*#__PURE__*/React.createElement(NumberInput, {
    id: "hno",
    labelText: "House number",
    placeholder: "5"
  })));
};
AddressDetails.story = {
  name: 'Residence Address'
};