import StateMachine from './StateMachine'

export default {

	data() {
		return {
			screenWidth: 0,
			screenHeight: 0,
		}
	},

	computed: {
		aspect: (aspectIntWidth, aspectIntHeight) => aspectIntWidth / aspectIntHeight,
		letterbox: (screenWidth, screenHeight, aspect) => screenWidth / aspect > screenHeight ? false : true,
		classes: (hasAspect, letterbox) => hasAspect ? (letterbox ? 'letterbox' : 'windowbox') : '',
	},

	oncreate() {
		StateMachine.connect(this, [
			'hasAspect',
			'aspectIntWidth',
			'aspectIntHeight',
		])
		this.setDimensions()
		this.observe('hasAspect', () => this.setDimensions(), { defer: true })
	},

	methods: {
		setDimensions() {
			this.set({
				screenWidth: this.refs.screen.offsetWidth,
				screenHeight: this.refs.screen.offsetHeight,
			})
			StateMachine.setState({ aspectWidth: this.refs.aspect.offsetWidth })
			StateMachine.setState({ aspectHeight: this.refs.aspect.offsetHeight })
		},
	},

}