import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["index"],
  _excluded2 = ["index"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/esm/Range/test/Range.visual.jsx",
  _this = this;
import React from 'react';
import { storiesOf } from '@storybook/react';
import { uniTestkitFactoryCreator } from '@wix/wix-ui-test-utils/vanilla';
import Range from '../Range';
import inputUniDriverFactory from '../../Input/Input.uni.driver';
import Input from '../../Input';
import DatePicker from '../../DatePicker';
var dataHooks = {
  focusedInput: 'focused-input',
  focusedDatePicker: 'focused-date-picker',
  input: 'wsr-input'
};
var datePickerDate = new Date('2020-01-01');
var focusInput = function focusInput(index) {
  var node = document.body;
  var dataHookSelector = "[data-hook*=".concat(dataHooks.input, "]");
  var elements = node.querySelectorAll(dataHookSelector);
  elements[index].click();
  elements[index].focus();
};
var FocusedInput = function FocusedInput(_ref) {
  var index = _ref.index,
    props = _objectWithoutProperties(_ref, _excluded);
  React.useEffect(function () {
    focusInput(index);
  }, [index]);
  return /*#__PURE__*/React.createElement(Input, _extends({
    placeholder: "placeholder",
    dataHook: dataHooks.focusedInput
  }, props, {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 33,
      columnNumber: 5
    }
  }));
};
var FocusedDatePicker = function FocusedDatePicker(_ref2) {
  var index = _ref2.index,
    props = _objectWithoutProperties(_ref2, _excluded2);
  React.useEffect(function () {
    focusInput(index);
  }, [index]);
  return /*#__PURE__*/React.createElement(DatePicker, _extends({
    placeholderText: "placeholder",
    dataHook: dataHooks.focusedDatePicker,
    value: datePickerDate
  }, props, {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 47,
      columnNumber: 5
    }
  }));
};
var tests = [{
  describe: 'input',
  its: [{
    it: 'two elements',
    renderedComponent: /*#__PURE__*/React.createElement(Range, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 63,
        columnNumber: 11
      }
    }, /*#__PURE__*/React.createElement(Input, {
      placeholder: "placeholder",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 64,
        columnNumber: 13
      }
    }), /*#__PURE__*/React.createElement(Input, {
      placeholder: "placeholder",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 65,
        columnNumber: 13
      }
    }))
  }, {
    it: 'three elements',
    renderedComponent: /*#__PURE__*/React.createElement(Range, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 72,
        columnNumber: 11
      }
    }, /*#__PURE__*/React.createElement(Input, {
      placeholder: "placeholder",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 73,
        columnNumber: 13
      }
    }), /*#__PURE__*/React.createElement(Input, {
      placeholder: "placeholder",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 74,
        columnNumber: 13
      }
    }), /*#__PURE__*/React.createElement(Input, {
      placeholder: "placeholder",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 75,
        columnNumber: 13
      }
    }))
  }]
}, {
  describe: 'datePicker',
  its: [{
    it: 'two elements',
    renderedComponent: /*#__PURE__*/React.createElement(Range, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 87,
        columnNumber: 11
      }
    }, /*#__PURE__*/React.createElement(DatePicker, {
      value: datePickerDate,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 88,
        columnNumber: 13
      }
    }), /*#__PURE__*/React.createElement(DatePicker, {
      value: datePickerDate,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 89,
        columnNumber: 13
      }
    }))
  }, {
    it: 'three elements',
    renderedComponent: /*#__PURE__*/React.createElement(Range, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 96,
        columnNumber: 11
      }
    }, /*#__PURE__*/React.createElement(DatePicker, {
      value: datePickerDate,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 97,
        columnNumber: 13
      }
    }), /*#__PURE__*/React.createElement(DatePicker, {
      value: datePickerDate,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 98,
        columnNumber: 13
      }
    }), /*#__PURE__*/React.createElement(DatePicker, {
      value: datePickerDate,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 99,
        columnNumber: 13
      }
    }))
  }]
}, {
  describe: 'focus',
  its: [{
    it: 'first input',
    renderedComponent: /*#__PURE__*/React.createElement(Range, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 111,
        columnNumber: 11
      }
    }, /*#__PURE__*/React.createElement(FocusedInput, {
      index: 0,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 112,
        columnNumber: 13
      }
    }), /*#__PURE__*/React.createElement(Input, {
      placeholder: "placeholder",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 113,
        columnNumber: 13
      }
    }))
  }, {
    it: 'last input',
    renderedComponent: /*#__PURE__*/React.createElement(Range, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 120,
        columnNumber: 11
      }
    }, /*#__PURE__*/React.createElement(Input, {
      placeholder: "placeholder",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 121,
        columnNumber: 13
      }
    }), /*#__PURE__*/React.createElement(FocusedInput, {
      index: 1,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 122,
        columnNumber: 13
      }
    }))
  }, {
    it: 'first datePicker',
    renderedComponent: /*#__PURE__*/React.createElement(Range, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 129,
        columnNumber: 11
      }
    }, /*#__PURE__*/React.createElement(FocusedDatePicker, {
      index: 0,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 130,
        columnNumber: 13
      }
    }), /*#__PURE__*/React.createElement(DatePicker, {
      value: datePickerDate,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 131,
        columnNumber: 13
      }
    }))
  }, {
    it: 'last datePicker',
    renderedComponent: /*#__PURE__*/React.createElement(Range, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 138,
        columnNumber: 11
      }
    }, /*#__PURE__*/React.createElement(DatePicker, {
      value: datePickerDate,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 139,
        columnNumber: 13
      }
    }), /*#__PURE__*/React.createElement(FocusedDatePicker, {
      index: 1,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 140,
        columnNumber: 13
      }
    }))
  }]
}];
tests.forEach(function (_ref3) {
  var describe = _ref3.describe,
    its = _ref3.its;
  return its.forEach(function (_ref4) {
    var it = _ref4.it,
      renderedComponent = _ref4.renderedComponent;
    storiesOf("Range/".concat(describe), module).add(it, function () {
      return renderedComponent;
    });
  });
});