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

import {FLASH_BUTTON_ACTIVE_COLOR} from '../CameraTopControls/styles';

const BUTTON_BACKGROUND_COLOR = COLORS.GRAY_TWENTY_SEVEN;

export const styles = StyleSheet.create({
  controlsBottom: {
    alignItems: 'center',
    bottom: 46 + SPACING['x2.5'],
    flexDirection: 'row',
    position: 'absolute',
    width: '100%',
  },
  controlOpenPicker: {
    alignItems: 'flex-start',
    flex: 1,
    justifyContent: 'center',
    left: SPACING.x2,
  },
  controlRecordButton: {
    alignItems: 'center',
    flex: 1,
    justifyContent: 'center',
  },
  button: {
    alignItems: 'center',
    backgroundColor: BUTTON_BACKGROUND_COLOR,
    borderRadius: 100,
    height: 42,
    justifyContent: 'center',
    width: 42,
  },
  buttonLarge: {
    backgroundColor: BUTTON_BACKGROUND_COLOR,
    borderRadius: 100,
    padding: 20,
  },
  recordButtonContainer: {
    alignItems: 'center',
    height: 96,
    justifyContent: 'center',
    width: 96,
  },
  captureButtonOuter: {
    alignItems: 'center',
    borderColor: COLORS.WHITE,
    borderRadius: 76,
    borderWidth: 3,
    height: 75,
    justifyContent: 'center',
    width: 75,
  },
  captureButtonInner: {
    backgroundColor: COLORS.WHITE,
    borderRadius: 74,
    height: 65,
    width: 65,
  },
  lensText: {
    color: FLASH_BUTTON_ACTIVE_COLOR,
    fontSize: 10,
    fontWeight: '600',
    textAlign: 'center',
  },
  controlRightBottom: {
    alignItems: 'center',
    flexDirection: 'row',
    flex: 1,
    gap: 12,
    justifyContent: 'space-between',
    paddingRight: SPACING.x2,
  },
  placeholderView: {
    height: 42,
    width: 42,
  },
});
