import { Drawer } from 'antd';
import { useEffect, useState } from 'react';
import { Avatar, Typography } from 'antd';
import { useTranslation } from 'react-i18next';
import { useUserSelector } from '@/store/userStore';

interface ContentDrawerProps {
  open: boolean;
  closeDrawer: () => void;
  children: React.ReactNode;
  type: 'create' | 'edit';
  login?: string;
  name?: string;
  email?: string | null;
}

export default function ContentDrawer({
  open,
  closeDrawer,
  children,
  type,
  login,
  name,
  email,
}: ContentDrawerProps) {
  const user = useUserSelector();
  const { t } = useTranslation();
  const [width, setWidth] = useState<number | string>('30%');

  const calculateWidths = () => {
    const windowWidth = window.innerWidth;
    const expanded = Math.max(windowWidth * 0.3, 300);
    setWidth(expanded);
  };

  useEffect(() => {
    calculateWidths();
    window.addEventListener('resize', calculateWidths);
    return () => window.removeEventListener('resize', calculateWidths);
  }, []);
  console.log(login, user?.login, login === user?.login);

  const editDrawerTitle = (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        gap: 12,
      }}
    >
      <div
        onClick={closeDrawer}
        style={{
          display: 'flex',
          alignItems: 'center',
          height: '24px',
          width: '24px',
          cursor: 'pointer',
        }}
      >
        <img
          src="./icons/drawer/arrow_back.svg"
          alt="close_drawer"
          style={{ height: '16px', width: '16px' }}
        />
      </div>

      <div style={{ display: 'flex', alignItems: 'center', gap: 12, flex: 1 }}>
        <Avatar
          src={
            login ? `https://gamma.heado.ru/go/ava?name=${login}` : undefined
          }
          size={40}
          style={{ flexShrink: 0 }}
        />
        <div>
          <Typography.Text
            strong
            style={{ display: 'block', fontSize: '20px' }}
          >
            {name} {login === user?.login ? t('you') : ''}
          </Typography.Text>
          <Typography.Text type="secondary" style={{ fontSize: 14 }}>
            {email}
          </Typography.Text>
        </div>
      </div>

      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          height: '24px',
          width: '24px',
        }}
      >
        <img
          src="./icons/drawer/delete.svg"
          alt="delete"
          style={{ height: '18px', width: '16px' }}
        />
      </div>
    </div>
  );

  const createDrawerTitle = (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        gap: 12,
      }}
    >
      <div
        onClick={closeDrawer}
        style={{
          display: 'flex',
          alignItems: 'center',
          height: '24px',
          width: '24px',
          cursor: 'pointer',
        }}
      >
        <img
          src="./icons/drawer/arrow_back.svg"
          alt="close_drawer"
          style={{ height: '16px', width: '16px' }}
        />
      </div>

      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          gap: 12,
          flex: 1,
          fontSize: '20px',
        }}
      >
        {t('newAccount')}
      </div>

      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          height: '24px',
          width: '24px',
        }}
        onClick={closeDrawer}
      >
        <img
          src="./icons/drawer/delete.svg"
          alt="delete"
          style={{ height: '18px', width: '16px' }}
        />
      </div>
    </div>
  );

  return (
    <Drawer
      title={type === 'create' ? createDrawerTitle : editDrawerTitle}
      placement="right"
      open={open}
      width={width}
      destroyOnHidden={true}
      closable={false}
    >
      {children}
    </Drawer>
  );
}