import React from 'react';
import shortid from "shortid";
import GridViewIcon from '@mui/icons-material/GridView';
import ApiIcon from '@mui/icons-material/Api';
import GridOnIcon from '@mui/icons-material/GridOn';
import ListIcon from '@mui/icons-material/List';
import CropSquareIcon from '@mui/icons-material/CropSquare';
import FormatColorTextIcon from '@mui/icons-material/FormatColorText';
import BadgeIcon from '@mui/icons-material/Badge';
import EmailIcon from '@mui/icons-material/Email';
import PhoneIcon from '@mui/icons-material/Phone';
import ImageIcon from '@mui/icons-material/Image';
import TitleIcon from '@mui/icons-material/Title';
import AddCardIcon from '@mui/icons-material/AddCard';
import {Card} from 'Dnd/Draggable Components/Previous_Components/CustomComponents/Card/card'
import Heading from 'Dnd/Draggable Components/Previous_Components/CustomComponents/Heading/heading';

import DataGridlist from "Dnd/Draggable Components/Previous_Components/CustomComponents/GridList/DataGrid"
import NestedList from 'Dnd/Draggable Components/Previous_Components/CustomComponents/List/List';
import CustomButton from 'Dnd/Draggable Components/Previous_Components/CustomComponents/Button/Button';
import CustomTextField from 'Dnd/Draggable Components/Previous_Components/CustomComponents/TextField/TextField';
import Grid from 'Dnd/Draggable Components/Previous_Components/SyncFusionComponents/Grid'
import { DropDownList } from "Dnd/Draggable Components/Previous_Components/CustomComponents/DropDownList";
import MenuBar from 'Dnd/Draggable Components/Previous_Components/CustomComponents/MenuBar';
{importComponents}
// import NavBar from '../../Draggable Components/Previous_Components/CustomComponents/Canvas/Navbar';
// import SideBar from '../../Draggable Components/Previous_Components/CustomComponents/Canvas/Sidebar';

export const SIDEBAR_ITEM = "sidebarItem";
export const ROW = "row";
export const COLUMN = "column";
export const COMPONENT = "component";
export const SIDEBAR_ITEM_CRUD = "sidebarItemCRUD";

export const ErrorControlList = {
  email: "email",
  text: "text",
  number: { min: "minimum 8 digit is required", max: "maximum limit 20 digit" },
  password: {
    min: "minimum length 8 is required",
    max: "maximum limit 20 character",
    upperCase: "Must contain 1 uppercase letter",
    lowerCase: "Must contain 1 lowercase letter",
  },
};

export const ValidationControl = (value, m1, m2) => {
  switch (m1) {
    case "password":
      switch (m2) {
        case "max":
          var regexp = /^.{,20}$/i;
          let maxvalid = regexp.test(value);
          return maxvalid
            ? {
                isValid: true,
              }
            : {
                isValid: false,
                errorMessage: ErrorControlList["password"]["max"],
              };
          break;
        case "min":
          var regexp = /^.{8,}$/i;
          let minvalid = regexp.test(value);
          return minvalid
            ? {
                isValid: true,
              }
            : {
                isValid: false,
                errorMessage: ErrorControlList["password"]["min"],
              };
          break;
        case "upperCase":
          var regexp = /^(?=.*[A-Z])/;
          let upvalid = regexp.test(value);
          return upvalid
            ? {
                isValid: true,
              }
            : {
                isValid: false,
                errorMessage: ErrorControlList["password"]["upperCase"],
              };

          break;
        case "lowerCase":
          var regexp = /^(?=.*[a-z])/;
          let lowvalid = regexp.test(value);
          return lowvalid
            ? {
                isValid: true,
              }
            : {
                isValid: false,
                errorMessage: ErrorControlList["password"]["min"],
              };
          break;
        default:
          break;
      }
      break;
    case "number":
      switch (m2) {
        case "max":
          var regexp = /^.{,20}$/i;
          let maxvalid = regexp.test(value);
          return maxvalid
            ? {
                isValid: true,
              }
            : {
                isValid: false,
                errorMessage: ErrorControlList["number"]["max"],
              };
          break;
        case "min":
          var regexp = /^.{8,}$/i;
          let minvalid = regexp.test(value);
          return minvalid
            ? {
                isValid: true,
              }
            : {
                isValid: false,
                errorMessage: ErrorControlList["number"]["min"],
              };
          break;
        default:
          break;
      }
      break;
    case "email":
      var regexp = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g;
      let emvalid = regexp.test(value);
      return emvalid
        ? {
            isValid: true,
          }
        : {
            isValid: false,
            errorMessage: m2,
          };
      break;
    case "text":
      var regexp = /[\S\s]+[\S]+/;
      let maxvalid = regexp.test(value);
      return maxvalid
        ? {
            isValid: true,
          }
        : {
            isValid: false,
            errorMessage: m2,
          };
      break;
    default:
      break;
  }
};

export interface ISidebar_Items {
    id: string;
    type: string;
    component: {
        type: string;
        content: JSX.Element | string | React.FC | any;
        icon: JSX.Element;
        component_name?: string;
        icon_name?: string;
    },
}

export const getList = (params: string) => {
  if (params === "int") return ["radio", "dropdown"];
  if (params === "date") return ["date", "datetime"];
};


export const SIDEBAR_ITEMS: ISidebar_Items[] = [
	{
        id: shortid.generate(),
        type: SIDEBAR_ITEM,
        component: {
            type: "Heading",
            content: <Heading />,
            icon: < TitleIcon className='dnd sidebarIcon' />,
            component_name: "Heading",
            icon_name: "TitleIcon",
        },
    },
       {InterfaceReplacement}
    /*{
        id: shortid.generate(),
        type: SIDEBAR_ITEM,
        component: {
            type: "Card",
            content: <Card />,
            icon: < AddCardIcon className='dnd sidebarIcon' />,
            component_name: "Card",
            icon_name: "AddCardIcon",
        },
    },
    {
        id: shortid.generate(),
        type: SIDEBAR_ITEM,
        component: {
            type: "SyncFusion GRID",
            content: Grid,
            icon: < GridViewIcon className='dnd sidebarIcon' />,
            component_name: "Grid",
            icon_name: "GridViewIcon",
        },
    },
    {
        id: shortid.generate(),
        type: SIDEBAR_ITEM,
        component: {
            type: "GridList",
            content: < DataGridlist />,
            icon: < GridOnIcon className='dnd sidebarIcon' />,
            component_name: "DataGridlist",
            icon_name: "GridOnIcon",
        },
    },
    {
        id: shortid.generate(),
        type: SIDEBAR_ITEM,
        component: {
            type: "List",
            content: <DropDownList />,
            icon: < ListIcon className='dnd sidebarIcon' />,
            component_name: "NestedList",
            icon_name: "ListIcon",
        },
    },
    {
        id: shortid.generate(),
        type: SIDEBAR_ITEM,
        component: {
            type: "Button",
            content: < CustomButton />,
            icon: < CropSquareIcon className='dnd sidebarIcon' />,
            component_name: "CustomButton",
            icon_name: "CropSquareIcon",
        },
    },
    {
        id: shortid.generate(),
        type: SIDEBAR_ITEM,
        component: {
            type: "input",
            content: <CustomTextField />,
            icon: < FormatColorTextIcon className='dnd sidebarIcon' />,
            component_name: "CustomTextField",
            icon_name: "FormatColorTextIcon",
        },
    },
    {
        id: shortid.generate(),
        type: SIDEBAR_ITEM,
        component: {
            type: "MenuBar",
            content: <MenuBar />,
            icon: < FormatColorTextIcon className='dnd sidebarIcon' />,
            component_name: "MenuBar",
            icon_name: "FormatColorTextIcon",
        },
    },
    {
        id: shortid.generate(),
        type: SIDEBAR_ITEM,
        component: {
            type: "name",
            content: "Some name",
            icon: < BadgeIcon className='dnd sidebarIcon' />,
            icon_name: "BadgeIcon",
        }
    },
    {
        id: shortid.generate(),
        type: SIDEBAR_ITEM,
        component: {
            type: "email",
            content: "Some email",
            icon: < EmailIcon className='dnd sidebarIcon' />,
            icon_name: "EmailIcon",
        }
    },
    {
        id: shortid.generate(),
        type: SIDEBAR_ITEM,
        component: {
            type: "phone",
            content: "Some phone",
            icon: < PhoneIcon className='dnd sidebarIcon' />,
            icon_name: "PhoneIcon",
        }
    },
    {
        id: shortid.generate(),
        type: SIDEBAR_ITEM,
        component: {
            type: "image",
            content: "Some image",
            icon: < ImageIcon className='dnd sidebarIcon' />,
            icon_name: "ImageIcon",
        }
    }*/
];

export const functionTOmap = (component, config) => {
    // console.log("component from functionToMap :", component)
    switch (component) {
		case "Heading":
            return <Heading config={config} />;
            break;
        case "Card":
            return <Card config={config} />
            break;
        case "SyncFusion GRID":
            return <Grid />
            break;
        {functionTOmap}
        case "Button":
            return <CustomButton config={config} />
            break;
        case "input":
            return <CustomTextField config={config} />
            break;
        case "MenuBar":
            return <MenuBar />
            break;
        case "GridList":
            return <DataGridlist />
            break;
        case "List":
            return <DropDownList />
            // return <NestedList config={config} />
            break;
        case "name":
            return <h3>Some Name</h3>
            break;
        case "email":
            return "Some email"
            break;
        case "phone":
            return "Some phone"
            break;
        case "image":
            return "Some image"
            break;
        default:
            return <p>Cant't find any Component</p>
    }
}
export const mapNametoComponent = {
    "Grid": Grid,
    {mapNametoComponent}
    "DataGridlist": <DataGridlist />,
    "NestedList": <NestedList />,
    "CustomButton": <CustomButton />,
    "CustomTextFields": <CustomTextField />,
    "Some name": "Some name",
    "Some email": "Some email",
    "Some phone": "Some phone",
    "Some image": "Some image"
}

export const SyncFusion_Component_List = ["SyncFusion GRID"];
export const MUI_Component_List = ["DataGridlist", "NestedList", "CustomButton", "CustomTextFields"];

export const Configurations = {
    "Button": {
        "innerContent": {
            "input-type": "text"
        },
        "type": {
            "input-type": "list",
            "options": ["Button", "Submit", "Reset"]
        },
        "cssClass": {
            "input-type": "list",
            "options": ["e-primary", "e-success", "e-info", "e-warning", "e-danger"]
        },
        "onClick": {
            "input-type": "text"
        }
    },
    "input": {
        "innerContent": {
            "input-type": "text"
        },
    },
    Heading: {
    innerContent: {
      "input-type": "text",
    },
    headerSize: {
      "input-type": "list",
      options: ["h1", "h2", "h3", "h4", "h5", "h6"],
    },
    backgroundColor: {
      "input-type": "heading-color",
      options: [
        "black",
        "gray",
        "white",
        "Tomato",
        "DodgerBlue",
        "MediumSeaGreen",
        "LightGray",
      ],
    },
    color: {
      "input-type": "heading-color",
      options: ["black", "white", "gray"],
    },
    fontFamily: {
      "input-type": "list",
      options: [
        "Arial",
        "Helvetica",
        "Verdana",
        "Georgia",
        "Courier New",
        "cursive",
      ],
    },
  },
    GlobalConfig: {
    backgroundColor: {
      "input-type": "table-color",
      options: [
        "black",
        "gray",
        "white",
        "Tomato",
        "DodgerBlue",
        "MediumSeaGreen",
        "LightGray",
      ],
    },
    SidebarBackgroundColor: {
      "input-type": "table-color",
      options: [
        "black",
        "gray",
        "white",
        "Tomato",
        "DodgerBlue",
        "MediumSeaGreen",
        "LightGray",
      ],
    },
    SidebarTextColor: {
      "input-type": "table-color",
      options: [
        "black",
        "gray",
        "white",
        "Tomato",
        "DodgerBlue",
        "MediumSeaGreen",
        "LightGray",
      ],
    },
    SidebarTextBackgroundColor: {
      "input-type": "table-color",
      options: [
        "black",
        "gray",
        "white",
        "Tomato",
        "DodgerBlue",
        "MediumSeaGreen",
        "LightGray",
      ],
    },
  },

    "List": {
        "primaryKeyList": {
            "input-type": "list",
            "options": ["backend_stack_id", "backend_stack_name", "createdBy", "modifiedBy", "createdAt", "modifiedAt", "isActive"]
        },
        "secondaryKeyList": {
            "input-type": "list",
            "options": ["backend_stack_id", "backend_stack_name", "createdBy", "modifiedBy", "createdAt", "modifiedAt", "isActive"]
        },
        "functionName": {
            "input-type": "list",
            "options": ["getAllBackend_Stacks", "getOneBackend_Stacks", "searchBackend_Stacks", "addBackend_Stacks", "updateBackend_Stacks", "deleteBackend_Stacks"]
        },
    },
    "SyncFusion GRID": {
        "primaryKeyList": {
            "input-type": "list",
            "options": ["backend_stack_id", "backend_stack_name", "createdBy", "modifiedBy", "createdAt", "modifiedAt", "isActive"]
        },
        "modelName": {
            "input-type": "list",
            "options": ["", "Backend_Stacks"]
        },
        "tableName": {
            "input-type": "list",
            "options": ["", "backend_stacks"]
        },
        "functionName": {
            "input-type": "list",
            "options": ["getAllBackend_Stacks", "getOneBackend_Stacks", "searchBackend_Stacks", "addBackend_Stacks", "updateBackend_Stacks", "deleteBackend_Stacks"]
        },
    },
    "Card": {
        "header": {
            "input-type": "text"
        },
        "content": {
            "input-type": "text"
        }
    },
    {columnConfig}

}


// "SyncFusion GRID": {
//     "heading": {
//         "input-type": "text"
//     },
//     "primaryKeyList": {
//         "input-type": "list",
//         "options": ["backend_stack_id", "backend_stack_name", "createdBy", "modifiedBy", "isActive"]
//     },
//     "modelName": {
//         "input-type": "list",
//         "options": ["Backend_Stacks", "Branches", "Project", "User"]
//     },
//     "componentName": {
//         "input-type": "text"
//     }
// }

// {
//     id: shortid.generate(),
//     type: SIDEBAR_ITEM,
//     component: {
//         type: "NavBar",
//         content: NavBar,
//         icon: < ApiIcon className='dnd sidebarIcon' />,
//         component_name: "NavBar",
//         icon_name: "ApiIcon",
//     },
// },
// {
//     id: shortid.generate(),
//     type: SIDEBAR_ITEM,
//     component: {
//         type: "SideBar",
//         content: SideBar,
//         icon: < ApiIcon className='dnd sidebarIcon' />,
//         component_name: "SideBar",
//         icon_name: "ApiIcon",
//     },
// },

// case "NavBar":
//     return <NavBar />
//     break;
// case "SideBar":
//     return <SideBar />
//     break;