import { ifIphoneX } from 'react-native-iphone-x-helper';
import { Platform, Dimensions } from 'react-native';

import { foregroundColor, secondaryTextColor, borderColor, linkTextColor } from '../components/commonColors';
import { statusbarHeight } from '../status-bar';

const { width: SCREEN_WIDTH } = Dimensions.get('window');
const bgRatio = 226.0 / 750;

export const cellStyles = {
  contentContainer: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  separatorContainer: {
    height: 1,
    width: '100%',
    paddingHorizontal: 16,
  },
  separator: {
    height: 1,
    width: '100%',
    backgroundColor: borderColor,
  },
};

export const screenWrapper = {
  wrapper: {
    flex: 1,
    backgroundColor: 'white',
  },
};

export const wrapperStyles = {
  bottomWrapper: {
    flex: 1,
    paddingBottom: ifIphoneX(34, 0),
    backgroundColor: 'white',
  },
  bottomWrapperExternalStore: {
    flex: 1,
    paddingBottom: 0,
    backgroundColor: 'white',
  },
};

export const chatStyles = {
  wrapper: {
    backgroundColor: foregroundColor,
    flexDirection: 'column',
  },
  avatarImage: {
    width: 44,
    height: 44,
    marginVertical: 6,
    marginLeft: 13,
  },
  name: {
    fontSize: 15,
    fontWeight: '600',
    fontStyle: 'normal',
    letterSpacing: 0,
    textAlign: 'left',
    color: '#000000',
    marginRight: 5,
  },
  handle: {
    fontSize: 14,
    fontWeight: '400',
    fontStyle: 'normal',
    letterSpacing: 0,
    textAlign: 'left',
    color: secondaryTextColor,
  },
  unread: {
    color: '#000000',
    fontWeight: 'bold',
  },
  textWrapper: {
    paddingLeft: 12,
    paddingVertical: 8,
    flex: 1,
  },
  messageButton: {
    marginRight: 16,
  },
  bgWrapper: {
    backgroundColor: 'white',
    flex: 1,
  },
};

export const actionSheetStyles = {
  buttonText: {
    fontSize: 15,
    color: linkTextColor,
  },
  buttonBox: {
    height: 50,
    marginTop: 0,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#fff',
  },
  cancelButtonBox: {
    height: 50,
    marginTop: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#fff',
  },
};

export const onboardingStyles = {
  header: {
    height: (SCREEN_WIDTH * bgRatio) + (Platform.OS === 'ios' ? statusbarHeight : 0),
  },
  headerContent: {
    flex: 1,
    width: '100%',
    alignItems: 'center',
    justifyContent: 'center',
  },
  button: {
    width: '30%',
  },
};

export const footerStyles = {
  roundButtonContainer: {
    marginBottom: ifIphoneX(17, 0),
    justifyContent: 'flex-end',
    alignItems: 'center',
    flexDirection: 'row',
    alignSelf: 'stretch',
  },
  textButtonContainer: {
    marginRight: 24,
    marginBottom: ifIphoneX(48, 28),
    justifyContent: 'flex-end',
    alignItems: 'center',
    flexDirection: 'row',
    alignSelf: 'stretch',
  },
};