import React, { useState } from 'react';
import { List, Typography, Tooltip } from 'antd';
import { FaKeyboard } from 'react-icons/fa';
import { DefaultModal } from '../../../../Components/Modal/DefaultModal';
import '../../../../Styles/OverAllStyle/OverAllStyle.scss';
const { Title, Text } = Typography;
const ShortcutKeyHelper = ({}) => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const shortcuts = [
    { key: 'Alt + Z', description: 'Customer' },
    { key: 'Alt + A', description: 'Extra Charge' },
    { key: 'Alt + N', description: 'Quick Add' },
    { key: 'Alt + R', description: 'Reprint' },
    { key: 'Alt + S', description: 'Split Payment' },
    { key: 'F4', description: 'Quick Pay' },
    { key: 'Alt + W', description: 'Hold and Recall' },
    { key: 'Ctrl + Q', description: 'Qty Change' },
    { key: 'Ctrl + E', description: 'Price Change' },
    { key: 'Ctrl + Y', description: 'Packing' },
    { key: 'Ctrl + B', description: 'Weight / Amount' },
    { key: 'Alt + P', description: 'Change Total Amount' },
    { key: 'Ctrl + I', description: 'Customer Rate History' },
  ];

  return (
    <>
      <Tooltip title="Keyboard Shortcuts">
        <div
          onClick={() => setIsModalOpen(true)}
          style={{
            cursor: 'pointer',
            display: 'flex',
            alignItems: 'center',
            gap: '5px',
            padding: '5px 10px',
            borderRadius: '4px',
            fontSize: '18px',
          }}
        >
          <FaKeyboard />
          {/* <span>Shortcuts</span> */}
        </div>
      </Tooltip>

      <DefaultModal
        title={
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
            <FaKeyboard />
            Keyboard Shortcuts
          </div>
        }
        open={isModalOpen}
        handleCancel={() => setIsModalOpen(false)}
        footer={null}
        width={500}
      >
        <List
          className="Shot-KeyBoard"
          dataSource={shortcuts}
          renderItem={(item) => (
            <List.Item>
              <div
                className="KBwithKey"
                style={{
                  display: 'flex',
                  justifyContent: 'space-between',
                  width: '100%',
                }}
              >
                <Text
                  className="KBwithKey"
                  strong
                  style={{
                    fontFamily: 'monospace',
                    backgroundColor: '#f5f5f5',
                    padding: '2px 6px',
                    borderRadius: '3px',
                  }}
                >
                  {item.key}
                </Text>
                <Text>{item.description}</Text>
              </div>
            </List.Item>
          )}
        />
      </DefaultModal>
    </>
  );
};

export default ShortcutKeyHelper;