import {StyleSheet} from 'react-native';
import {COLORS} from '@shared/colors';
import {IS_SMALL_DEVICE, windowDimensions} from '@shared/constants';
import {SPACING} from '@shared/theme';

export const getDigitalSignaturePopupStyle = (
  color = COLORS.BLUE,
  height?: number,
) => {
  const footerWidth = 0.8 * windowDimensions.width;

  return `.m-signature-pad--footer {
    height: 40px;
    margin-top: 20px;
    width: ${footerWidth - 2}px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .m-signature-pad--footer
    .button {
      border-radius: 70px;
      bottom: 0;
      font-size: 14px;
      font-weight: 700;
      height: 40px;
      line-height: 30px;
      position: absolute;
      text-align: center;
      width: 47%;
    }
  
  .m-signature-pad--footer
    .button.clear {
      background-color: ${COLORS.WHITE};
      border-color: ${color};
      color: ${color};
      left: 0;
    }
  
  .m-signature-pad--footer
    .button.save {
      background-color: ${color};
      color: ${COLORS.WHITE};
      right: 0;
      box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px rgba(0, 0, 0, 0.14), 0px 1px 5px rgba(0, 0, 0, 0.12);
    }
  
    .m-signature-pad {
      bottom: 0;
      height: ${height ? `${height}px` : '80vh'};
      left: 0;
      right: 0;
      top: 0;
      width: 100%;
    }`;
};

export const styles = StyleSheet.create({
  signatureScreenContainer: {
    height: windowDimensions.height * (IS_SMALL_DEVICE ? 0.7 : 0.6),
    width: windowDimensions.width * 0.8,
  },
  activityIndicator: {
    alignItems: 'center',
    backgroundColor: COLORS.TRANSPARENT_BLACK_FOUR,
    bottom: -windowDimensions.height,
    justifyContent: 'center',
    left: -windowDimensions.width,
    position: 'absolute',
    right: -windowDimensions.width,
    top: -windowDimensions.height,
  },
  title: {
    marginLeft: SPACING['x1.5'],
    marginTop: SPACING.x2,
  },
});
