<commit_before>import { ChangeEvent } from 'react';
import { c, msgid } from 'ttag';

import { Recipient, SimpleMap } from '@proton/shared/lib/interfaces';
import { ContactEmail } from '@proton/shared/lib/interfaces/contacts';
import { Checkbox, Icon, Button, Tooltip } from '../../../components';
import { CustomAction } from './types';

interface Props {
    allChecked: boolean;
    selected: string[];
    numberOfRecipients: number;
    onCheckAll: (checked: boolean) => void;
    onCompose?: () => void;
    onCreate: () => void;
    onDelete: () => void;
    customActions: CustomAction[];
    groupsEmailsMap: SimpleMap<ContactEmail[]>;
    recipients: Recipient[];
    onClose: () => void;
}

const ContactsWidgetGroupsToolbar = ({
    allChecked,
    selected,
    numberOfRecipients,
    onCheckAll,
    onCompose,
    onCreate,
    onDelete,
    customActions,
    groupsEmailsMap,
    recipients,
    onClose,
}: Props) => {
    const selectedCount = selected.length;
    const handleCheck = ({ target }: ChangeEvent<HTMLInputElement>) => onCheckAll(target.checked);
    const noContactInSelected = !selectedCount || !numberOfRecipients;
    const noSelection = !selectedCount;
    const deleteText = noSelection
        ? c('Action').t`Delete contact group`
        : // translator: the variable is a positive integer (written in digits) always greater or equal to 1
          c('Action').ngettext(
              msgid`Delete ${selectedCount} contact group`,
              `Delete ${selectedCount} contact groups`,
              selectedCount
          );

    return (
        <div className="flex flex-items-align-center">
            <Tooltip title={allChecked ? c('Action').t`Deselect all` : c('Action').t`Select all`}>
                <span className="mr1 flex">
                    <Checkbox
                        id="id_contact-widget-select-all"
                        className="ml0-5"
                        checked={allChecked}
                        onChange={handleCheck}
                        data-testid="contacts:select-all-contact-group"
                    />
                    <label htmlFor="id_contact-widget-select-all" className="sr-only">
                        {allChecked ? c('Action').t`Deselect all` : c('Action').t`Select all`}
                    </label>
                </span>
            </Tooltip>
            {onCompose ? (
                <Tooltip title={c('Action').t`Compose`}>
                    <Button
                        icon
                        className="inline-flex mr0-5 pt0-5 pb0-5"
                        onClick={onCompose}
                        disabled={noContactInSelected}
                        data-testid="contacts:compose-contact-group"
                    >
                        <Icon name="envelope" alt={c('Action').t`Compose`} />
                    </Button>
                </Tooltip>
            ) : null}
            {customActions.map((action) =>
                action.render({ groupsEmailsMap, recipients, noSelection, onClose, selected })
            )}
            <Tooltip>
                <Button
                    icon
                    className="inline-flex pt0-5 pb0-5"
                    onClick={onDelete}
                    disabled={noSelection}
                    title={deleteText}
                    data-testid="contacts:delete-contact-group"
                >
                    <Icon name="trash" /><commit_msg>Move title={deleteText} to Tooltip in ContactsWidgetGroupsToolbar<commit_after>import { ChangeEvent } from 'react';
import { c, msgid } from 'ttag';

import { Recipient, SimpleMap } from '@proton/shared/lib/interfaces';
import { ContactEmail } from '@proton/shared/lib/interfaces/contacts';
import { Checkbox, Icon, Button, Tooltip } from '../../../components';
import { CustomAction } from './types';

interface Props {
    allChecked: boolean;
    selected: string[];
    numberOfRecipients: number;
    onCheckAll: (checked: boolean) => void;
    onCompose?: () => void;
    onCreate: () => void;
    onDelete: () => void;
    customActions: CustomAction[];
    groupsEmailsMap: SimpleMap<ContactEmail[]>;
    recipients: Recipient[];
    onClose: () => void;
}

const ContactsWidgetGroupsToolbar = ({
    allChecked,
    selected,
    numberOfRecipients,
    onCheckAll,
    onCompose,
    onCreate,
    onDelete,
    customActions,
    groupsEmailsMap,
    recipients,
    onClose,
}: Props) => {
    const selectedCount = selected.length;
    const handleCheck = ({ target }: ChangeEvent<HTMLInputElement>) => onCheckAll(target.checked);
    const noContactInSelected = !selectedCount || !numberOfRecipients;
    const noSelection = !selectedCount;
    const deleteText = noSelection
        ? c('Action').t`Delete contact group`
        : // translator: the variable is a positive integer (written in digits) always greater or equal to 1
          c('Action').ngettext(
              msgid`Delete ${selectedCount} contact group`,
              `Delete ${selectedCount} contact groups`,
              selectedCount
          );

    return (
        <div className="flex flex-items-align-center">
            <Tooltip title={allChecked ? c('Action').t`Deselect all` : c('Action').t`Select all`}>
                <span className="mr1 flex">
                    <Checkbox
                        id="id_contact-widget-select-all"
                        className="ml0-5"
                        checked={allChecked}
                        onChange={handleCheck}
                        data-testid="contacts:select-all-contact-group"
                    />
                    <label htmlFor="id_contact-widget-select-all" className="sr-only">
                        {allChecked ? c('Action').t`Deselect all` : c('Action').t`Select all`}
                    </label>
                </span>
            </Tooltip>
            {onCompose ? (
                <Tooltip title={c('Action').t`Compose`}>
                    <Button
                        icon
                        className="inline-flex mr0-5 pt0-5 pb0-5"
                        onClick={onCompose}
                        disabled={noContactInSelected}
                        data-testid="contacts:compose-contact-group"
                    >
                        <Icon name="envelope" alt={c('Action').t`Compose`} />
                    </Button>
                </Tooltip>
            ) : null}
            {customActions.map((action) =>
                action.render({ groupsEmailsMap, recipients, noSelection, onClose, selected })
            )}
            <Tooltip title={deleteText}>
                <Button
                    icon
                    className="inline-flex pt0-5 pb0-5"
                    onClick={onDelete}
                    disabled={noSelection}
                    data-testid="contacts:delete-contact-group"
                >
                    <Icon name="trash" />
{'fraction_non_alphanumeric': 0.11825007219174126, 'fraction_numerical': 0.0040427375108287615, 'mean_word_length': 1.7336227308602998, 'pattern_counts': {'":': 0, '<': 39, '<?xml version=': 0, '>': 55, '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': '2500304', 'n_tokens_mistral': 1829, 'n_tokens_neox': 1775, 'n_words': 371}