import { __ } from '@wordpress/i18n';
import { TextControl } from '@wordpress/components';
import MaskedControl from '../../shared/MaskedControl';

type LianaAPIFieldsProps = {
	namePrefix?: string;
	onInputChange: ( name: string, value: string ) => void;
	values: LianaAPISettings;
};

export default function LianaAPIFields( props: LianaAPIFieldsProps ) {
	const { namePrefix = '', onInputChange, values } = props;

	return (
		<>
			<TextControl
				className="gs-text-control"
				label={ __( 'API address', 'liana-with-growthstack' ) + ' *' }
				name="address"
				required
				value={ values.address ?? '' }
				onChange={ ( value ) =>
					onInputChange( `${ namePrefix }address`, value )
				}
			/>
			<TextControl
				className="gs-text-control"
				label={ __( 'API realm', 'liana-with-growthstack' ) + ' *' }
				name="realm"
				required
				value={ values.realm ?? '' }
				onChange={ ( value ) =>
					onInputChange( `${ namePrefix }realm`, value )
				}
			/>
			<TextControl
				className="gs-text-control"
				label={ __( 'API user', 'liana-with-growthstack' ) + ' *' }
				name="user"
				required
				value={ values.user ?? '' }
				onChange={ ( value ) =>
					onInputChange( `${ namePrefix }user`, value )
				}
			/>
			<MaskedControl
				className="gs-text-control"
				label={ __( 'API secret', 'liana-with-growthstack' ) + ' *' }
				name="secret"
				required
				value={ values.secret ?? '' }
				onChange={ ( value ) =>
					onInputChange( `${ namePrefix }secret`, value )
				}
			/>
		</>
	);
}