import * as React from 'react';
import { TouchableOpacity, View, Text } from 'react-native';
import { ScrollInto } from './scrollInto';
import { color } from './color';
const $container = {
  minHeight: '100%',
  backgroundColor: color.white,
  paddingBottom: 16,
  maxHeight: '100%'
};
export const ScrollTab = function ScrollTab(props) {
  const [dataSourceCords, setDataSourceCords] = React.useState([]);
  const {
    style,
    onPressItem,
    dataMenu,
    styleTitle,
    styleViewTitle
  } = props;
  const styles = Object.assign({}, $container, style);
  const stylesTitle = Object.assign({}, $title, styleTitle);
  const stylesViewTitle = Object.assign({}, $viewTitle, styleViewTitle);
  return /*#__PURE__*/React.createElement(View, {
    style: styles
  }, /*#__PURE__*/React.createElement(ScrollInto, {
    dataHeader: dataMenu,
    dataLengthView: dataSourceCords
  }, dataMenu.map((item, index) => {
    return /*#__PURE__*/React.createElement(View, {
      key: index,
      onLayout: event => {
        // lấy ra vị của view
        const layout = event.nativeEvent.layout;
        dataSourceCords[index] = layout.y;
        // set vào mảng
        setDataSourceCords(dataSourceCords);
      }
    }, /*#__PURE__*/React.createElement(View, {
      style: stylesViewTitle
    }, /*#__PURE__*/React.createElement(Text, {
      style: [stylesTitle]
    }, item.tile)), item.option.map((title, indexOption) => /*#__PURE__*/React.createElement(TypeSelect, {
      key: indexOption,
      title: title,
      onSelect: () => onPressItem(title)
    })));
  })));
};
export const TypeSelect = props => {
  const {
    title,
    onSelect
  } = props;
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TouchableOpacity, {
    onPress: onSelect
  }, /*#__PURE__*/React.isValidElement(title) ? title : /*#__PURE__*/React.createElement(Text, {
    style: $textSelect
  }, title)), /*#__PURE__*/React.createElement(View, {
    style: {
      height: 1,
      backgroundColor: color.backgroundSoft
    }
  }));
};
const $textSelect = {
  fontSize: 14,
  color: color.neutral700,
  flex: 1,
  margin: 16
};
const $viewTitle = {
  paddingHorizontal: 16,
  paddingTop: 16,
  paddingBottom: 8,
  backgroundColor: color.backgroundSoft
};
const $title = {
  fontSize: 18,
  color: color.neutral600
};
//# sourceMappingURL=ScrollTab.js.map