import { Container } from '@cleartrip/ct-design-container';
import { makeStyles, useStyles } from '@cleartrip/ct-design-style-manager';

import { IDividerProps } from './type';

const solidBorderStyles = makeStyles((theme) => {
  return {
    container: {
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      overflow: 'hidden',
    },
    vertical: {
      margin: -theme.spacing[0.5],
      marginLeft: theme.spacing[0.5],
      width: 1,
    },
    horizontal: {
      margin: -theme.spacing[0.5],
      marginTop: theme.spacing[0.5],
      height: 1,
    },
    flex: {
      flex: 1,
    },
    flexRow: {
      flexDirection: 'row',
    },
  };
});

const Divider: React.FC<IDividerProps> = ({
  dividerColor = '#F3F3F3',
  dividerType = 'solid',
  dividerWidth = 1.5,
  orientation = 'horizontal',
  dividerLength = '100%',
  styleConfig,
}) => {
  const dividerDynamicStyles = useStyles(
    (theme) => {
      let defaultContainerStyle = {};
      let defaultMaskStyle = {};

      if (orientation === 'horizontal') {
        defaultContainerStyle = {
          height: dividerWidth + 1,
          width: '100%',
          flexDirection: 'row',
          flex: 1,
        };
        defaultMaskStyle = {
          borderWidth: dividerWidth,
          borderColor: dividerColor || theme.color.border.neutral,
          borderStyle: dividerType,
          width: dividerLength,
        };
      } else {
        defaultContainerStyle = {
          width: dividerWidth + 1,
          height: '100%',
        };
        defaultMaskStyle = {
          borderWidth: dividerWidth,
          borderColor: dividerColor,
          borderStyle: dividerType,
          height: dividerLength,
        };
      }
      return {
        defaultContainerStyle,
        defaultMaskStyle,
      };
    },
    [dividerWidth, dividerColor, dividerType, dividerLength],
  );

  return (
    <Container
      styleConfig={{ root: [solidBorderStyles.flex, solidBorderStyles.flexRow, ...(styleConfig?.root ?? [])] }}
    >
      <Container styleConfig={{ root: [solidBorderStyles.container, dividerDynamicStyles.defaultContainerStyle] }}>
        <Container styleConfig={{ root: [solidBorderStyles[orientation], dividerDynamicStyles.defaultMaskStyle] }} />
      </Container>
    </Container>
  );
};

Divider.displayName = 'Divider';
export default Divider;