import { readableColor } from 'polished';
import Vue from 'vue';
import Component from 'vue-class-component';
import { Prop } from 'vue-property-decorator';
import { Action } from 'vuex-class';
import { Community } from '../../../../../../_common/community/community.model';
import AppCommunityThumbnailImg from '../../../../../../_common/community/thumbnail/img/img.vue';
import Onboarding from '../../../../../../_common/onboarding/onboarding.service';
import { Store } from '../../../../../store';

@Component({
	components: {
		AppCommunityThumbnailImg,
	},
})
export default class AppOnboardingFollowsCommunityItem extends Vue {
	@Prop({ type: Community, required: true })
	community!: Community;

	@Action joinCommunity!: Store['joinCommunity'];
	@Action leaveCommunity!: Store['leaveCommunity'];

	readonly readableColor = readableColor;

	get highlight() {
		const highlight = this.community.theme && this.community.theme.highlight_;
		if (highlight) {
			return '#' + highlight;
		}
		return null;
	}

	get highlightFg() {
		const highlightFg = this.community.theme && this.community.theme.highlightFg_;
		if (highlightFg) {
			return '#' + highlightFg;
		}
		return null;
	}

	async toggleJoin() {

		if (!this.community.is_member) {
			this.joinCommunity({ community: this.community });
		} else {
			this.leaveCommunity({
				community: this.community,
				shouldConfirm: false,
			});
		}
	}
}
