// Silence may be golden, but sometimes words paint the canvas of understanding.
const EditableField = {
  name: 'EditableField',
  components: {
    LinksyButton
  },
  props: {
    initialValue: String,
    isReplacing: Boolean,
    disabled: Boolean
  },
  data() {
    return {
      replacement: this.initialValue
    }
  },
  methods: {
    cancelEdit() {
        this.$emit('cancel');
    },
    confirmEdit() {
        this.$emit('confirm', this.replacement);
    },
  },
  template: `
    <div>
        <input
            type="text"
            v-model="replacement"
            class="form-control fw-normal fs-6 w-100"
        />
        <div class="edit-button d-flex justify-content-end gap-2 mt-2">
            <linksy-button class="shadow-sm" :disabled="disabled" :loading="isReplacing" @click="confirmEdit">
                <i class="fa fa-check"></i>
            </linksy-button>
            <linksy-button class="shadow-sm" :disabled="disabled" variant="white_outline" @click="cancelEdit">
                <i class="fa fa-times"></i>
            </linksy-button>
        </div>
    </div>
  `
};

const LinkSource = {
	name: 'LinkSource',
	components: {
		LinksyDropdown,
        EditableField
	},
	props: {
		item: Object,
		isUrlEditable: {
            type: Boolean,
            default: false
        },
        disabled: {
            type: Boolean,
            default: false
        },
        isFieldReplacing: Boolean
	},
	methods: {
        toggleEdit() {
            this.item.isEditing = !this.item.isEditing
        },
        replaceField(replacement) {
            this.$emit('onReplaceField', replacement)
        }
	},
	template: `
        <div class="d-flex align-items-start">
            <div class="w-100">
                <div v-if="!item.isEditing">
                    <div v-if="!isUrlEditable" class="d-flex flex-column gap-2">
                        <div class="item-title position-relative source-tag-text d-inline gap-2 w-100">
                            <span class="text-wrap">{{item.source}}</span>
                            
                            <div class="item-direct-links position-absolute">
                                <a :href="item.view_link" target="_blank">View</a>
                                <a :href="item.edit_link" target="_blank">Edit</a>
                                <a class="cursor-pointer" @click="toggleEdit()">Modify</a>
                            </div>
                        </div>
                        
                        <a class="text-decoration-none fw-normal text-wrap" :href="item.link" target="_blank">{{item.link}}</a>
                    </div>

                    <div v-else class="d-flex flex-column gap-2">
                        <div class="item-title position-relative source-tag-text d-inline gap-2 w-100">
                            <a class="text-decoration-none fw-normal text-wrap">{{item.link}}</a>
                            
                            <div class="item-direct-links position-absolute">
                                <a :href="item.view_link" target="_blank">View</a>
                                <a :href="item.edit_link" target="_blank">Edit</a>
                                <a class="cursor-pointer" @click="toggleEdit()">Modify</a>
                            </div>
                        </div>

                        <span class="text-wrap">{{item.source}}</span>
                    </div>
                </div>
                <editable-field
                    v-else
                    :initial-value="isUrlEditable? item.link : item.source"
                    :is-replacing="isFieldReplacing"
                    :disabled="disabled"
                    @cancel="item.isEditing = false"
                    @confirm="replaceField"
                />
              </div>
        </div>
    `,
}

const LinkTarget = {
	name: 'LinkTarget',
    components: {
		EditableField,
	},
	props: {
		item: Object,
		isSelected: Boolean,
		isDisabled: Boolean,
		selectable: Boolean,
		isLinkReplace: Boolean,
        isLinkReplacing: Boolean
	},
	methods: {
		onSelect() {
			this.$emit('onSelect')
		},
        toggleEdit() {
            this.item.editing = !this.item.editing
        },
        replaceLink(replacement) {
			this.$emit('onReplaceLink', replacement)
        }
	},
	template: `
        <tr>
            <td width="50" class="border-bottom-0 p-3 lh-base">
                <span v-if="selectable" class="linksy-checkbox" @click="onSelect" :class="{'checked': isSelected, 'is-disabled': isDisabled}"></span>
            </td>
            <td class="border-bottom-0 px-3 py-2 lh-base">
                <div class="link-container d-flex align-items-start">
                    <span class="tag link-tag">Link</span>
                    <div class="link-tag-anchor w-100">
                        <div v-if="!item.editing" class="d-inline gap-2">
                            <a class="fw-normal text-wrap">{{item.link}}</a>
                            <i v-if="isLinkReplace" @click="toggleEdit" class="fas fa-edit ms-2"></i>
                        </div>
                        <editable-field
                            v-else
                            :initial-value="item.link"
                            :is-replacing="isLinkReplacing"
                            @cancel="item.editing = false"
                            @confirm="replaceLink"
                        />
                    </div>
                </div>
            </td>
        </tr>
    `
}

const LinkOccurrence = {
	name: 'LinkOccurrence',
	components: {
		LinkSource,
		LinkTarget,
        EditableField
	},
	directives: {
		'linksy-dom-text': LinksyDOMText,
	},
	props: {
		data: {
			type: Object,
			required: true,
		},
		onSelect: {
			type: Function,
			default: () => {},
		},
		isSelected: {
			type: Function,
			default: () => {},
		},
		disabled: Boolean,
		enableAnchorSelect: Boolean,
		titleReplace: Boolean,
        urlReplace: Boolean,
        isUrlEditable: Boolean,
		isLinkReplace: {
			type: Boolean,
			default: false
		},
        isAnchorReplacing: Boolean,
        isLinkReplacing: Boolean,
        isFieldReplacing: Boolean
	},
	methods: {
		getScore(score) {
			if (!score) {
				return '...'
			}
			score = Math.round((parseFloat(score) + Number.EPSILON) * 100)
			return score < 0 ? 0 : score
		},
		getScoreColor(score) {
			return scoreToColor(score)
		},
        toggleEdit(elem) {
            elem.isEditingAnchor = !elem.isEditingAnchor
        },
        replaceAnchor(replacement, item) {
			this.$emit('onReplaceAnchor', replacement, item, this.data)
        },
        replaceField(replacement, item) {
            this.$emit('onReplaceField', replacement, item)
        },
        replaceLink(replacement, item) {
			this.$emit('onReplaceLink', replacement, item)
        }
	},
	template: `
        <table>
            <tbody>
                <div v-for="item in (Array.isArray(data) ? data : [data])">
                    <tr>
                        <td width="30" class="border-bottom-0 p-0 lh-base">
                            <span v-if="titleReplace || urlReplace" class="linksy-checkbox" class="linksy-checkbox" @click="() => onSelect(item, elem)" :class="{'checked': isSelected(item, elem), 'is-disabled': disabled}"></span>
                        </td>
                        <td class="border-bottom-0 p-0 lh-base">
                            <link-source
                                :item="item"
                                :isUrlEditable="isUrlEditable"
                                :isFieldReplacing="isFieldReplacing"
                                :disabled="disabled"
                                @on-replace-field="(e) => replaceField(e, item)"
                            ></link-source>
                        </td>
                    </tr>
                    <link-target
                        :is-link-replace="isLinkReplace"
                        v-if="!urlReplace && !titleReplace && item.link"
                        :selectable="!enableAnchorSelect && !titleReplace"
                        :is-selected="isSelected(item)"
                        :is-disabled="disabled"
                        :item="item"
                        :isLinkReplacing="isLinkReplacing"
                        @on-select="() => onSelect(item)"
                        @on-replace-link="(e) => replaceLink(e, item)"
                    ></link-target>
                    <div v-for="elem of item.anchors" class="mb-2">
                        <link-target
                            v-if="elem.link"
                            :is-selected="isSelected(item, elem)"
                            :is-disabled="disabled"
                            :item="elem"
                            @on-select="() => onSelect(item, elem)"
                        ></link-target>
                        <tr>
                            <td width="50" class="border-bottom-0 p-3 lh-base">
                                <span v-if="enableAnchorSelect" class="linksy-checkbox" @click="() => onSelect(item, elem)" :class="{'checked': isSelected(item, elem), 'is-disabled': disabled}"></span>
                            </td>
                            <td class="border-bottom-0 px-3 py-2 lh-base">
                                <div class="w-100">
                                    <div class="anchor-content d-flex align-items-center justify-content-between">
                                        <div class="d-flex w-100">
                                            <span class="tag anchor-tag">Anchor</span>
                                            <div v-if="!elem.isEditingAnchor" class="anchor-tag-text">
                                                <div v-if="enableAnchorSelect" class="d-inline gap-2 w-100">
                                                    <span class="fw-normal text-wrap" v-linksy-dom-text>"{{elem.anchor}}"</span>
                                                    <i class="fas fa-edit ms-2" @click="toggleEdit(elem)"></i>
                                                </div>
                                                <span v-else class="fw-normal text-wrap" v-linksy-dom-text>{{elem.anchor}}</span>
                                            </div>
                                            <editable-field
                                                v-else
                                                class="w-100"
                                                :initial-value="elem.anchor"
                                                :is-replacing="isAnchorReplacing"
                                                @cancel="elem.isEditingAnchor = false"
                                                @confirm="(e) => replaceAnchor(e, elem)"
                                            />
                                        </div>
                                        <span v-if="!elem.editing" class="score" :style="{ 'background-color': getScoreColor(elem.score) }">{{ getScore(elem.score) }}</span>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </div>
                </div>
            </tbody>
        </table>
    `,
}
