'use client';

import IconFont from '@/components/ui/iconFont';
import { cn } from '@/lib';
import Image from 'next/image';
import { useState } from 'react';
import { useChatStore } from '../store';

const message1 =
  'The threads of fate intertwine once more... I have been awaiting your arrival, seeker.The threads of fate intertwine once more... I have been awaiting your arrival, seeker.The threads of fate intertwine once more... I have been awaiting your arrival, seeker.';
const message2 =
  'The threads of fate intertwine once more... I have been awaiting your arrival, seeker.The threads of fate intertwine once more';

export default function PhoneCallMode() {
  const setIsPhoneCallMode = useChatStore((state) => state.setIsPhoneCallMode);
  const [isTextVisible, setIsTextVisible] = useState(true);

  return (
    <>
      <div className="flex h-full w-[calc(100vw-900px)] flex-col items-center">
        <div className="mt-5 flex flex-col items-center gap-6">
          <div className="flex gap-1">
            <Image
              className="flex-shrink-0 rounded-full object-cover"
              src="/avator.png"
              alt="avatar"
              width={20}
              height={20}
            />
            <span className="font-bold">{'Character 1 · 18'}</span>
          </div>
          <div className="text-xs font-black">{'00：01'}</div>
        </div>
        <div className="flex w-75 flex-1 flex-col justify-end gap-7.5 pb-25 text-sm">
          {isTextVisible && (
            <>
              <div className="text-white/40">{message1}</div>
              <div>{message2}</div>
            </>
          )}
        </div>
        <div className="mb-10 cursor-pointer text-xs font-black">
          Tag to top
        </div>
        <div
          onClick={() => setIsPhoneCallMode(false)}
          className={cn(
            'flex-center mb-25 h-20 w-20 cursor-pointer rounded-full bg-white/10',
            'bg-[linear-gradient(180deg,rgba(255,59,48,1)0%,rgba(222,46,36,1)100%)]'
          )}
        >
          <IconFont type="icon-tonghua" size={50} />
        </div>
      </div>

      {/* 显示文本按钮 */}
      <div
        onClick={() => setIsTextVisible(!isTextVisible)}
        className={cn(
          'flex-center absolute top-8 right-10 h-10 w-10 cursor-pointer rounded-full',
          'bg-white/10 hover:bg-white/20'
        )}
      >
        <IconFont type="icon-tonghua" size={20} />
      </div>
    </>
  );
}
