"use strict";

import React, { useContext, useState } from 'react';
import { StyleSheet, View } from 'react-native';
import { ApplicationContext } from "../Context/index.js";
import { SizedBox } from "../SizedBox/index.js";
import { Spacing, Styles } from "../Consts/index.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const Divider = ({
  size = 1,
  type = 'line',
  direction = 'horizontal',
  dashSpecs,
  color,
  style
}) => {
  const {
    theme
  } = useContext(ApplicationContext);
  const dashSize = 4;
  const dashSpacing = dashSpecs?.dashGap ?? Spacing.XS;
  const [lineLength, setLineLength] = useState(0);
  const numOfDashes = Math.ceil(lineLength / dashSpacing / 2);
  let styleLine = {
    height: '100%',
    width: size,
    overflow: 'hidden',
    justifyContent: 'space-between'
  };
  if (direction === 'horizontal') {
    styleLine = {
      width: '100%',
      height: size,
      overflow: 'hidden',
      alignItems: 'center',
      justifyContent: 'space-between'
    };
  }

  /**
   * Render dash divider
   */
  if (type === 'dash') {
    /**
     * Render dash dot divider
     */
    if (dashSpecs?.useDot) {
      let indicatorStyle = {
        width: size,
        height: dashSize,
        marginRight: 0,
        backgroundColor: color ?? theme.colors.border.default
      };
      styleLine = {
        width: size,
        flex: 1,
        justifyContent: 'space-between',
        marginVertical: Spacing.XS
      };
      if (direction === 'horizontal') {
        styleLine = {
          flex: 1,
          height: size,
          flexDirection: 'row',
          justifyContent: 'space-between',
          marginHorizontal: Spacing.XS
        };
        indicatorStyle = {
          width: dashSize,
          height: size,
          backgroundColor: color ?? theme.colors.border.default
        };
        return /*#__PURE__*/_jsxs(View, {
          style: [Styles.rowSpace, style],
          children: [/*#__PURE__*/_jsx(SizedBox, {
            width: 6,
            children: /*#__PURE__*/_jsx(View, {
              style: [styles.dotLeft, {
                backgroundColor: dashSpecs.dotColor
              }]
            })
          }), /*#__PURE__*/_jsx(View, {
            onLayout: event => {
              const {
                width
              } = event.nativeEvent.layout;
              if (lineLength !== width) {
                setLineLength(width);
              }
            },
            style: [styleLine],
            children: [...Array(numOfDashes)].map((_, i) => {
              return /*#__PURE__*/_jsx(View, {
                style: indicatorStyle
              }, `Divider${i}`);
            })
          }), /*#__PURE__*/_jsx(SizedBox, {
            width: 6,
            children: /*#__PURE__*/_jsx(View, {
              style: [styles.dotRight, {
                backgroundColor: dashSpecs.dotColor
              }]
            })
          })]
        });
      }
      return /*#__PURE__*/_jsxs(View, {
        style: [Styles.columnCenter, style],
        children: [/*#__PURE__*/_jsx(SizedBox, {
          height: 6,
          children: /*#__PURE__*/_jsx(View, {
            style: [styles.dotBottom, {
              backgroundColor: dashSpecs.dotColor
            }]
          })
        }), /*#__PURE__*/_jsx(View, {
          onLayout: event => {
            const {
              height
            } = event.nativeEvent.layout;
            if (lineLength !== height) {
              setLineLength(height);
            }
          },
          style: [styleLine],
          children: [...Array(numOfDashes)].map((_, i) => {
            return /*#__PURE__*/_jsx(View, {
              style: indicatorStyle
            }, `Divider${i}`);
          })
        }), /*#__PURE__*/_jsx(SizedBox, {
          height: 6,
          children: /*#__PURE__*/_jsx(View, {
            style: [styles.dotTop, {
              backgroundColor: dashSpecs.dotColor
            }]
          })
        })]
      });
    }

    /**
     * Render dash divider
     */
    if (direction === 'horizontal') {
      styleLine = {
        width: '100%',
        height: size,
        flexDirection: 'row',
        overflow: 'hidden',
        alignItems: 'center',
        justifyContent: 'space-between'
      };
    }
    return /*#__PURE__*/_jsx(View, {
      onLayout: event => {
        const {
          width,
          height
        } = event.nativeEvent.layout;
        const length = direction === 'horizontal' ? width : height;
        if (lineLength !== length) {
          setLineLength(length);
        }
      },
      style: [styleLine, style],
      children: [...Array(numOfDashes)].map((_, i) => {
        let indicatorStyle = {
          width: size,
          height: dashSize,
          marginRight: 0,
          backgroundColor: color ?? theme.colors.border.default
        };
        if (direction === 'horizontal') {
          indicatorStyle = {
            width: dashSize,
            height: size,
            backgroundColor: color ?? theme.colors.border.default
          };
        }
        return /*#__PURE__*/_jsx(View, {
          style: indicatorStyle
        }, `Divider${i}`);
      })
    });
  }

  /**
   * Render line divider
   */
  return /*#__PURE__*/_jsx(View, {
    style: [styleLine, {
      backgroundColor: color ?? theme.colors.border.default
    }, style]
  });
};
const styles = StyleSheet.create({
  dotTop: {
    width: 12,
    height: 12,
    borderRadius: 6,
    marginTop: 6,
    backgroundColor: 'red'
  },
  dotBottom: {
    width: 12,
    height: 12,
    borderRadius: 6,
    marginTop: -6,
    backgroundColor: 'red'
  },
  dotLeft: {
    width: 12,
    height: 12,
    borderRadius: 6,
    marginRight: 6
  },
  dotRight: {
    width: 12,
    height: 12,
    borderRadius: 6,
    marginRight: -6
  }
});
export { Divider };
//# sourceMappingURL=index.js.map