1  import { Trans } from '@lingui/macro';
  2  import {
  3    Box,
  4    MenuItem,
  5    Select,
  6    SelectChangeEvent,
  7    Typography,
  8    useMediaQuery,
  9    useTheme,
 10  } from '@mui/material';
 11  import { useRootStore } from 'src/store/root';
 12  import { GOVERNANCE_PAGE } from 'src/utils/mixPanelEvents';
 13  
 14  import { SearchInput } from '../../components/SearchInput';
 15  import { TitleWithSearchBar } from '../../components/TitleWithSearchBar';
 16  import { getProposalStates } from './StateBadge';
 17  
 18  type ProposalListHeaderProps = {
 19    proposalFilter: string;
 20    handleProposalFilterChange: (value: string) => void;
 21    handleSearchQueryChange: (value: string) => void;
 22  };
 23  
 24  type ProposalListHeaderElementProps = {
 25    proposalFilter?: string;
 26    handleSearchQueryChange: (value: string) => void;
 27    handleChange?: (event: SelectChangeEvent) => void;
 28  };
 29  
 30  export const ProposalListHeaderDesktop: React.FC<ProposalListHeaderElementProps> = ({
 31    proposalFilter,
 32    handleSearchQueryChange,
 33    handleChange,
 34  }) => {
 35    return (
 36      <>
 37        <Typography variant="h3" sx={{ flexGrow: 1 }}>
 38          <Trans>Proposals</Trans>
 39        </Typography>
 40        <Typography>
 41          <Trans>Filter</Trans>
 42        </Typography>
 43        <Select id="filter" value={proposalFilter} sx={{ minWidth: 140 }} onChange={handleChange}>
 44          <MenuItem value="all">
 45            <Trans>All proposals</Trans>
 46          </MenuItem>
 47          {getProposalStates().map((key) => (
 48            <MenuItem key={key} value={key}>
 49              {key}
 50            </MenuItem>
 51          ))}
 52        </Select>
 53        <SearchInput
 54          wrapperSx={{
 55            width: '280px',
 56          }}
 57          placeholder="Search proposals"
 58          onSearchTermChange={handleSearchQueryChange}
 59        />
 60      </>
 61    );
 62  };
 63  
 64  export const ProposalListHeaderMobile: React.FC<ProposalListHeaderElementProps> = ({
 65    proposalFilter,
 66    handleChange,
 67    handleSearchQueryChange,
 68  }) => {
 69    return (
 70      <>
 71        <TitleWithSearchBar
 72          title={<Trans>Proposals</Trans>}
 73          titleProps={{ variant: 'h3' }}
 74          onSearchTermChange={handleSearchQueryChange}
 75          searchPlaceholder="Search proposals"
 76        />
 77        <Box sx={{ display: 'flex', alignItems: 'center', gap: 4 }}>
 78          <Typography>
 79            <Trans>Filter</Trans>
 80          </Typography>
 81          <Select id="filter" value={proposalFilter} sx={{ minWidth: 140 }} onChange={handleChange}>
 82            <MenuItem value="all">
 83              <Trans>All proposals</Trans>
 84            </MenuItem>
 85            {getProposalStates().map((key) => (
 86              <MenuItem key={key} value={key}>
 87                {key}
 88              </MenuItem>
 89            ))}
 90          </Select>
 91        </Box>
 92      </>
 93    );
 94  };
 95  
 96  export const ProposalListHeader: React.FC<ProposalListHeaderProps> = ({
 97    proposalFilter,
 98    handleProposalFilterChange,
 99    handleSearchQueryChange,
100  }) => {
101    const handleChange = (event: SelectChangeEvent) => {
102      trackEvent(GOVERNANCE_PAGE.FILTER, { filter: event.target.value });
103      handleProposalFilterChange(event.target.value as string);
104    };
105    const { breakpoints } = useTheme();
106  
107    const md = useMediaQuery(breakpoints.up('md'));
108    const trackEvent = useRootStore((store) => store.trackEvent);
109  
110    return (
111      <Box
112        sx={{
113          px: 6,
114          py: 4,
115          display: 'flex',
116          flexDirection: {
117            xs: 'column',
118            md: 'row',
119          },
120          alignItems: {
121            xs: 'flex-start',
122            md: 'center',
123          },
124          gap: 3,
125          borderBottom: '1px solid',
126          borderColor: 'divider',
127        }}
128      >
129        {!md ? (
130          <ProposalListHeaderMobile
131            proposalFilter={proposalFilter}
132            handleChange={handleChange}
133            handleSearchQueryChange={handleSearchQueryChange}
134          />
135        ) : (
136          <ProposalListHeaderDesktop
137            proposalFilter={proposalFilter}
138            handleChange={handleChange}
139            handleSearchQueryChange={handleSearchQueryChange}
140          />
141        )}
142      </Box>
143    );
144  };