import FusePageSimple from '@fuse/core/FusePageSimple';
import Paper from '@mui/material/Paper';
import { styled } from '@mui/material/styles';
import { useState } from 'react';
import { withTranslation } from 'react-i18next';
import SearchInput from '../../shared-components/SearchInput';
import DashboardCategory from '../shared-components/DashboardCategory';

const categoriesMock = [
  {
    title: 'All Properties',
    value: 34,
    valueColor: 'secondary-main',
  },
  {
    title: 'New',
    value: 12,
    valueColor: 'common-highlight2',
  },
  {
    title: 'In Research',
    value: 3,
    valueColor: 'secondary-main',
  },
  {
    title: 'Interested',
    value: 25,
    valueColor: 'common-highlight1',
  },
  {
    title: 'Purchased',
    value: 8,
    valueColor: 'accept-main',
  },
  {
    title: 'Not Interested',
    value: 11,
    valueColor: 'error-main',
  },
];

const Root = styled(FusePageSimple)(({ theme }) => ({
  '& .FusePageSimple-header': {
    backgroundColor: theme.palette.background.paper,
    borderBottomWidth: 1,
    borderStyle: 'solid',
    borderColor: theme.palette.divider,
  },
  '& .FusePageSimple-toolbar': {},
  '& .FusePageSimple-content': {},
  '& .FusePageSimple-sidebarHeader': {},
  '& .FusePageSimple-sidebarContent': {},
}));

function DashboardPage({ t }) {
  const [query, setQuery] = useState('');

  const onInputType = (event) => {
    const { target } = event;
    const value = target?.value ?? '';
    setQuery(value);
  };

  const onSearch = () => {
    // query
  };

  return (
    <Root
      content={
        <div className="w-full p-60">
          <div className="flex flex-wrap justify-center items-center gap-20 mb-52">
            {categoriesMock.map(({ title, value, valueColor }) => (
              <DashboardCategory title={title} value={value} valueColor={valueColor} />
            ))}
          </div>

          <SearchInput
            className="mb-28"
            mode="manual"
            btnText={t('search_input_btn')}
            query={query}
            onType={onInputType}
            onSearch={onSearch}
          />

          <Paper className="w-full h-640 mb-[30px] rounded-20 shadow-light" />
        </div>
      }
      scroll="content"
    />
  );
}

export default withTranslation('dashboardPage')(DashboardPage);
