import { FC } from 'react';
import { LocalizeText } from '../../api';
import { Column } from '../Column';
import { Flex } from '../Flex';
import { Text } from '../Text';
import { LayoutAvatarImageView } from './LayoutAvatarImageView';

interface LayoutGiftTagViewProps {
    figure?: string;
    userName?: string;
    message?: string;
    editable?: boolean;
    onChange?: (value: string) => void;
}

export const LayoutGiftTagView: FC<LayoutGiftTagViewProps> = (props) => {
    const { figure = null, userName = null, message = null, editable = false, onChange = null } = props;

    return (
        <Flex className="octane-gift-card text-black" overflow="hidden">
            <div className="flex items-center justify-center gift-face shrink-0">
                {!userName && <div className="gift-incognito"></div>}
                {figure && (
                    <div className="gift-avatar relative w-[52px] h-[52px] shrink-0 overflow-hidden rounded-full bg-[#dfe6ea]">
                        <LayoutAvatarImageView
                            direction={2}
                            figure={figure}
                            headOnly={true}
                            style={{ backgroundSize: '100px auto', backgroundPosition: '-24px -33px' }}
                        />
                    </div>
                )}
            </div>
            <Flex className="w-full pt-4 pb-4 pe-4 ps-3" overflow="hidden">
                <Column className="grow!" justifyContent="between" overflow="auto">
                    {!editable && (
                        <Text textBreak className="gift-message">
                            {message}
                        </Text>
                    )}
                    {editable && onChange !== null && (
                        <textarea
                            className="gift-message h-full"
                            maxLength={140}
                            placeholder={LocalizeText('catalog.gift_wrapping_new.message_hint')}
                            value={message}
                            onChange={(e) => onChange(e.target.value)}
                        ></textarea>
                    )}
                    {userName && (
                        <Text italics textEnd className="pe-1">
                            {LocalizeText('catalog.gift_wrapping_new.message_from', ['name'], [userName])}
                        </Text>
                    )}
                </Column>
            </Flex>
        </Flex>
    );
};