import React from 'react';

import { LuCopy } from 'react-icons/lu';
import QRCode from 'react-qr-code';

import { ShmMsgAuthType } from '@/api/types';
import {
    MobileBlock,
    MobileList,
    MobileListItem,
} from '@/components/ui/mobile';
import { Lang } from '@/lang/Lang';
import useAppConfigStore from '@/stores/appConfig';
import { copyTextToClipboard } from '@/utils/helpers';

const ChangePhoneAuth4App = ({ msgAuthData, onCancelAuthWithPhoneNumber }: { msgAuthData: ShmMsgAuthType, onCancelAuthWithPhoneNumber?: () => void }) => {

    const { isMobile } = useAppConfigStore();


    if (isMobile) {
        return <>


            <div className='my-2  px-2 mt-6 text-sm text-gray-500 text-center '>{Lang.key('changePhoneWithAuth4AppInstructions')}</div>

            <MobileList outline>
                <MobileListItem
                    dividers
                    media={<LuCopy />}
                    title={msgAuthData?.code}
                    footer={Lang.key('changePhoneCopyCode')}
                    onClick={() => {
                        copyTextToClipboard(msgAuthData?.code?.toString() ?? '');
                    }}
                ></MobileListItem>



            </MobileList>

            <div className='px-2 text-sm text-gray-500 text-center'>
                {Lang.key('changePhoneSelectMessengerAndSendCode')}
            </div>
            <MobileBlock outline>
                <div className="flex items-center justify-around ">
                    {msgAuthData?.links?.map((val) => {
                        return (
                            <div
                                onClick={() => {
                                    window.open(val.link);
                                }}
                            >
                                <img
                                    className="w-12 h-12 rounded-lg cursor-pointer active:opacity-50"
                                    src={val.image}
                                />
                            </div>
                        );
                    })}
                </div>
            </MobileBlock>



        </>
    }

    return <div>

        <div className='  px-2 text-sm text-gray-500 '>{Lang.key('changePhoneWithAuth4AppInstructions')}</div>
        <div className=" px-2 my-2">
            <span className='text-xl font-bold'>1. </span>
            {Lang.key('changePhoneCopyCode')}
        </div>

        <div>
            <div
                onClick={() => {
                    copyTextToClipboard(msgAuthData?.code?.toString() ?? '');
                }}
                className="text-2xl relative bg-white dark:bg-black text-center px-2 py-2 rounded-sm cursor-pointer active:opacity-50 border-2 border-dashed border-gray-400 mx-2"
            >
                {msgAuthData?.code}

                <span className="absolute top-2 right-2 opacity-50">
                    <LuCopy />
                </span>
            </div>
        </div>


        <div className="my-2  px-2">
            <span className='text-xl font-bold'>2. </span>

            {Lang.key('changePhoneSelectMessenger')}

        </div>

        <div>
            <div className="flex items-center justify-around mt-4">
                {msgAuthData?.links?.map((val) => {
                    return (
                        <div
                            onClick={() => {
                                window.open(val.link);
                            }}
                        >
                            <img
                                className="w-12 h-12 rounded-lg cursor-pointer active:opacity-50"
                                src={val.image}
                            />
                        </div>
                    );
                })}
            </div>
        </div>

        <div className="my-2  px-2">
            <span className='text-xl font-bold'>3. </span>
            {Lang.key('changePhoneSendCodeToMessenger')}

        </div>


        <div className="bg-white rounded-md dark:bg-black flex items-center justify-center flex-col mt-10">
            <div>
                <QRCode
                    size={100}
                    value={`https://api.auth4app.com/code/link/${msgAuthData?.code_id}`}
                />
            </div>
            <div className="px-2 mt-2 text-xs text-center">
                {Lang.key('changePhoneScanQRCode')}
            </div>

        </div>
    </div>
}

export default ChangePhoneAuth4App;