import { AstraTheme } from 'Themes/themes';

enum postion {
  sticky = 'sticky',
}

export const inputStyle = {
  control: {
    fontSize: 14,
    backgroundColor: '#eee',
    borderRadius: '5px',
    border: 'none',
    borderBottomRightRadius: '0px',
    borderTopRightRadius: '0px',
  },

  highlighter: {
    padding: '12px 12px 10px',
    height: '40px',
    borderRadius: '50px',
  },

  input: {
    transition: AstraTheme.transitions.create(['background-color', 'box-shadow', 'border'], {
      duration: AstraTheme.transitions.duration.short,
    }),
    padding: '12px 12px 10px',
    height: '40px',
    borderRadius: '5px',
    border: 'none',
    borderBottomRightRadius: '0px',
    borderTopRightRadius: '0px',
    outlineWidth: 0,
  },

  mention: {
    backgroundColor: 'rgb(27,119,183,0.3)',
    borderTop: '5px solid',
    borderBottom: '5px solid',
    borderRadius: '5px',
  },

  suggestions: {
    list: {
      backgroundColor: 'white',
      fontSize: 14,
    },

    item: {
      padding: '5px 15px',
      borderBottom: '1px solid rgba(0,0,0,0.15)',

      '&focused': {
        backgroundColor: 'rgb(27,119,183,0.3)',
      },
    },
  },
};

export const commentStyling = {
  position: postion.sticky,
  zIndex: 10,
  transform: 'translate(0px, 0px)',
  bottom: '0px',
  width: '100vw',
  backgroundColor: '#fff',
  marginTop: 20,
};

export const dividerStyle = {
  maxWidth: 1250,
  width: '100%',
  margin: 'auto',
  height: 1,
  background: 'linear-gradient(to right, rgba(200,200,200,0) 0%, rgba(200,200,200,1) 5%, rgba(200,200,200,1) 95%, rgba(200,200,200,0) 100%)',
};

export const paperStyle = {
  maxWidth: 1200,
  width: '100%',
  padding: '20px 16px',
  margin: 'auto',
  boxShadow: '0px -12px 10px -10px rgba(0, 0, 0, 0.15)',
};

export const focusedStyle = focused => (focused ? {
  borderBottom: `2px solid ${AstraTheme.palette.primary.light}`,
  borderBottomLeftRadius: '0px',
  borderBottomRightRadius: '0px',
} : {
  borderBottom: 'none',
  borderBottomLeftRadius: '5px',
  borderBottomRightRadius: '0px',
});
export const focusedStyleButton = focused => (focused ? {
  borderBottom: `2px solid ${AstraTheme.palette.primary.light}`,
  borderBottomLeftRadius: '0px',
  borderBottomRightRadius: '0px',
  color: AstraTheme.palette.primary.light,
} : {
  borderBottom: 'none',
  borderBottomLeftRadius: '0px',
  borderBottomRightRadius: '5px',
  color: AstraTheme.palette.action.active,
});

export const buttonStyle = focused => ({
  height: '40px',
  width: '40px',
  borderRadius: '5px',
  borderTopLeftRadius: '0px',
  backgroundColor: '#eee',
  ...focusedStyleButton(focused),
});

export const mentionInputStyle = focused => ({
  ...inputStyle,
  input: {
    ...inputStyle.input,
    ...focusedStyle(focused),
  },
});

export const commentToolButtonStyle = {
  display: 'flex',
  alignItems: 'center',
  fontSize: 12,
  borderBottom: `1px solid ${AstraTheme.palette.text.secondary}`,
  borderRadius: 0,
  marginRight: 5,
  maxWidth: 40,
  minWidth: 40,
  padding: '3px 0',
  paddingBottom: 0.5,
};