import {StyleSheet} from 'react-native';
import {IS_SMALL_DEVICE, windowDimensions} from '@shared/constants';
import {
  BORDER_RADIUS,
  NewThemeColors,
  SPACING,
  ThemeColors,
} from '@shared/theme';

export const getDigitalSignatureDialogStyle = (
  theme: ThemeColors & NewThemeColors,
) => {
  return `
  html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: ${theme.background.layout.default};
  }

  .m-signature-pad {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: ${theme.background.layout.default};
    box-shadow: none;
    border: none;
  }

  .m-signature-pad--body {
    border: none;
    background-color: ${theme.background.layout.default};
  }

  .m-signature-pad--body canvas {
    display: block;
    background-color: ${theme.background.layout.default};
  }

  .m-signature-pad--footer {
    display: none;
    margin: 0px;
  }`;
};

const DIALOG_HEADER_HEIGHT = 60;
const DIALOG_FOOTER_HEIGHT = 150;
const CONTAINER_HEIGHT =
  (windowDimensions.height - DIALOG_FOOTER_HEIGHT - DIALOG_HEADER_HEIGHT) *
  (IS_SMALL_DEVICE ? 0.7 : 0.8);
const DIALOG_HORIZONTAL_PADDING = SPACING.x2 * 2;
const CONTAINER_WIDTH = windowDimensions.width - DIALOG_HORIZONTAL_PADDING;

export const styles = StyleSheet.create({
  signatureScreenContainer: {
    borderRadius: BORDER_RADIUS.l,
    borderWidth: 1,
    height: CONTAINER_HEIGHT,
    marginTop: SPACING.x1,
    overflow: 'hidden',
    width: CONTAINER_WIDTH,
  },
});
