<commit_before>import { createElement as h, useState } from 'react'
import PropTypes from 'prop-types'
import shortid from 'shortid'

import Input from '../Input'
import Label from '../Label'
import Spinner from '../Spinner'
import Spacer from '../Spacer'

const ModalDomainEdit = (props) => {

	const [ inputs, setInputs ] = useState({
		title: props.title
	})

	const onChange = (key) => (e) => setInputs({
		...inputs,
		[key]: e.target.value
	})

	const copyInput = (e) => {
		e.target.select()
		document.execCommand('copy')
	}

	const updateDomain = (e) => {
		e.preventDefault()
		props.updateDomain(props.id, inputs).then(props.closeModal)
	}

	const deleteDomain = (e) => {
		e.preventDefault()
		const c = confirm(`Are you sure you want to delete the domain "${ props.title }"? This action cannot be undone.`)
		if (c === true) props.deleteDomain(props.id, inputs).then(props.closeModal)
	}

	const titleId = shortid.generate()
	const idId = shortid.generate()

	return (
		h('form', { className: 'card', onSubmit: updateDomain },
			h('div', { className: 'card__inner' },

				h(Spacer, { size: 0.5 }),

				h(Label, { htmlFor: titleId }, 'Domain title'),

				h(Input, {
					type: 'text',
					id: titleId,
					required: true,
					disabled: props.fetching === true,
					focused: true,
					placeholder: 'Domain title',
					value: inputs.title,
					onChange: onChange('title')
				}),

				h(Label, { htmlFor: idId }, 'Domain id'),

				h(Input, {
					type: 'text',
					id: idId,
					readOnly: true,
					placeholder: 'Domain id',
					value: props.id,
					onFocus: copyInput
				})

			),
			h('div', { className: 'card__footer' },

				h('button', {
					type: 'button',
					className: 'card__button link',
					onClick: props.closeModal
				}, 'Close'),

				h('div', {
					className: 'card__separator'
				}),
<commit_msg>Tracking code in domain modal<commit_after>import { createElement as h, useState } from 'react'
import PropTypes from 'prop-types'
import shortid from 'shortid'

import Input from '../Input'
import Textarea from '../Textarea'
import Label from '../Label'
import Spinner from '../Spinner'
import Spacer from '../Spacer'

const ModalDomainEdit = (props) => {

	const [ inputs, setInputs ] = useState({
		title: props.title
	})

	const onChange = (key) => (e) => setInputs({
		...inputs,
		[key]: e.target.value
	})

	const copyInput = (e) => {
		e.target.select()
		document.execCommand('copy')
	}

	const updateDomain = (e) => {
		e.preventDefault()
		props.updateDomain(props.id, inputs).then(props.closeModal)
	}

	const deleteDomain = (e) => {
		e.preventDefault()
		const c = confirm(`Are you sure you want to delete the domain "${ props.title }"? This action cannot be undone.`)
		if (c === true) props.deleteDomain(props.id, inputs).then(props.closeModal)
	}

	const titleId = shortid.generate()
	const idId = shortid.generate()
	const embedId = shortid.generate()

	const srcUrl = (new URL('/tracker.js', location.href)).href
	const serverUrl = location.origin

	return (
		h('form', { className: 'card', onSubmit: updateDomain },
			h('div', { className: 'card__inner' },

				h(Spacer, { size: 0.5 }),

				h(Label, { htmlFor: titleId }, 'Domain title'),

				h(Input, {
					type: 'text',
					id: titleId,
					required: true,
					disabled: props.fetching === true,
					focused: true,
					placeholder: 'Domain title',
					value: inputs.title,
					onChange: onChange('title')
				}),

				h(Label, { htmlFor: idId }, 'Domain id'),

				h(Input, {
					type: 'text',
					id: idId,
					readOnly: true,
					placeholder: 'Domain id',
					value: props.id,
					onFocus: copyInput
				}),

				h(Label, { htmlFor: embedId }, 'Embed code'),

				h(Textarea, {
					type: 'text',
					id: embedId,
					readOnly: true,
					rows: 4,
					value: `<script async src="${ srcUrl }" data-ackee-server="${ serverUrl }" data-ackee-domain-id="${ props.id }"></script>`,
					onFocus: copyInput
				})

			),
			h('div', { className: 'card__footer' },

				h('button', {
					type: 'button',
					className: 'card__button link',
					onClick: props.closeModal
				}, 'Close'),

				h('div', {
					className: 'card__separator'
				}),

{'fraction_non_alphanumeric': 0.16367980884109917, 'fraction_numerical': 0.0011947431302270011, 'mean_word_length': 3.099902056807052, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 17, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7654544', 'n_tokens_mistral': 1673, 'n_tokens_neox': 1374, 'n_words': 369}